backbone.js - 模型/视图如何链接到 DOM 元素?
我只是在玩弄backbone.js 和一些jQuery 魔法来为一些即将到来的项目做准备。
一个测试用例包含一张表,其行由主干视图呈现。它们会随着值的变化而完美地重新渲染。然后,整个表格通过 jQuery 插件(动画表格排序)进行排序,行移动到新位置。事实上,这个过程一次有效,但下一次,行出现两次,一切都会变得混乱。
DOM 元素和主干视图之间的链接是否有可能无法处理这样的更改?有什么解决方法吗?
I'm just playing around with backbone.js and some jQuery magic to prepare for some upcoming projects.
One test case contains a table whose rows are rendered by a backbone view. They get perfectly re-rendered on value change. Afterwards the whole table is sorted by an jQuery plugin (Animated Table Sort), rows move to new positions. In fact, this process works once, but the next time, rows appear twice, everything ends up in chaos.
Is it possible, that the link between DOM element and backbone view can't handle such an change? Are there any workarounds?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
当您使用诸如backbone.js或knockout.js之类的模型/视图框架进行开发时,我发现您需要重新安排您的思维和实现,以更改模型显示的内容(例如排序),而不是允许它们在视图中发生(就像使用 jquery 插件一样)。
如果您最终使用视图端脚本来做一些奇特的事情(动画就是一个很好的例子),那么您需要通过禁用或扩展绑定来确保模型正确更新。
另请注意,根据 文档 ,该动画排序插件会从 DOM 中删除表行,将它们添加到新的 DIV 中,对它们进行动画处理,从 DIV 中删除它们,然后将它们恢复到表中。我想知道在这一切完成之后,主干网是否已经失去了对这些 TD 的跟踪,并且当它在更改后重新渲染时,它只是添加了一个新的集合,因为最后一个集合已“消失”。
When you're developing with a Model/View framework like backbone.js or knockout.js, I find that you need to re-arrange your thinking and implementations to make changes to what is diplayed (like sorting) to the Model, and not allow them to happen in the view (like using a jquery plugin).
If you do end up using a view-side script to do something fancy (animations are a good example), then it is up to you to make sure the model is updated correctly, either by disabling or extending the binding.
Also note that according to the documentation, that animated sort plugin removes your table rows from the DOM, adds them to new DIVs, animates them, removes them from the DIVs, and restores them to the table. I'm wondering if after this is all done, backbone has lost track of those TDs, and when it re-renders after the change, it's just adding a new set since the last set is 'gone'.
感谢您的回答。事实上,表排序器做了很多事情,使得 fpr 主干很难维护绑定。我已经切换到了很棒的 Quicksand 插件,它使用隐藏列表来动画另一个(可见)列表中的更改。更适合backbone.js。
Thanks for your answers. Indeed, the table sorter does a lot that makes it difficult fpr backbone to maintain bindings. I've switched over to the great Quicksand plugin which uses a hidden list to animate changes in another (visible) list. Fits better to backbone.js.
您的集合维护模型的顺序,从而维护相应的视图。如果外部力量(如 jQuery 表排序插件)修改了视图的顺序,则此更改不会固有地反映在 Backbone 集合中,因此事情很快就会不同步。
此外,如果表排序器克隆元素并删除原始元素,Backbone 可能会失去对视图的跟踪并最终重新创建它们。
Your collection maintains an order for your models, and therefor your corresponding views. If an outside force (like a jQuery table sorting plugin) modifies the order of the views, this change is not inherently reflected in the Backbone collection, so things are quickly out of sync.
Also, if the table sorter clones elements and removes the original, Backbone would likely lose track of the views and end up recreating them.