BackboneJS 渲染问题

11 浏览
0 Comments

BackboneJS 渲染问题

过去六个月我一直在使用Backbone开发。前两个月是在摸索中度过的,学习并确定如何将我的代码结构化。接下来的四个月则是专注于开发一个适用于生产环境的应用程序。不要误会,Backbone让我摆脱了以前客户端代码中数千行的混乱,但它也让我能在更短的时间内做更宏大的事情,从而带来了一系列全新的问题。对于我在这里提出的所有问题,都有简单的解决方案,但它们感觉像是一些黑客行为或者不正确的解决方法。我承诺,对于一个出色的解决方案,我会奖励300积分。以下是问题:

  1. 加载 - 对于我们的用例(一个管理面板),悲观同步是不好的。对于某些事情,我需要在接受它们之前在服务器上验证。我们在“sync”事件合并到Backbone之前开始工作,

我们使用以下代码模拟加载事件:

window.old_sync = Backbone.sync
# Add a loading event to backbone.sync
Backbone.sync = (method, model, options) ->
  old_sync(method, model, options)
  model.trigger("loading")

很好。它按预期工作,但感觉不正确。我们将此事件绑定到所有相关的视图上,并在接收到该模型的成功或错误事件之前显示加载图标。有没有更好、更合理的方法来做到这一点?

现在是困难的部分:

  1. 有太多的东西频繁地自我渲染 - 假设我们的应用程序有选项卡。每个选项卡都控制一个集合。在左侧,你会得到该集合。你点击一个模型以开始在中心进行编辑。你更改其名称并按Tab键切换到下一个表单项。现在,你的应用程序是一个“实时某种东西”,它会注意到差异,运行验证,并自动将更改同步到服务器,无需保存按钮!很好,但是表单开头的H2标签的名字与输入框中的名字相同 - 你需要更新它。哦,你还需要更新侧边栏的列表中的名字。哦,列表会按照名字排序!

这里是另一个例子:你想在集合中创建一个新项目。你按下“新建”按钮,然后开始填写表单。你立即将项目添加到集合中吗?但是如果你决定放弃它会发生什么?或者如果你在另一个选项卡上保存了整个集合会怎样?还有一个文件上传 - 在开始上传文件之前,你需要保存和同步模型(这样你才能将文件附加到模型上)。所以一切都开始发生震动:你保存模型后,列表和表单再次渲染自己 - 它们已经同步了,所以你会得到一个新的删除按钮,并且它会显示在列表中 - 但是现在文件上传完成了,所以一切都再次开始渲染。

如果再加入子视图,一切都开始看起来像是费里尼电影。

  1. 无处不在的子视图 - 这是一篇关于这个问题的好文章。为了爱与和平,我无法找到一种正确的方法将jQuery插件或DOM事件附加到任何具有子视图的视图上。地狱很快降临。工具提示听到渲染即将到来就开始疯狂,子视图变得像僵尸一样,或者不响应。这是主要的痛点,因为实际的错误就在这里,但我仍然没有一个全面的解决方案。
  2. 闪烁 - 渲染很快。事实上,它非常快,以至于我的屏幕看起来像是发生了一次癫痫。有时是需要再次加载的图像(还需要另一个服务器调用!),所以HTML最小化然后突然最大化 - 为该元素添加一个CSS宽度+高度将解决这个问题。有时我们可以通过淡入和淡出来解决这个问题 - 但编写它们是一件让人头疼的事情,因为有时我们会重复使用一个视图,有时则是重新创建它。

总结 - 我在Backbone中的视图和子视图方面遇到了问题 - 它渲染了太多次,渲染时会出现闪烁,子视图会移除我的DOM事件并吃掉我的大脑。

谢谢!更多细节:使用Ruby on Rails Gem的BackboneJS。使用UnderscoreJS模板进行模板化。

0