javascript 框架：啥是 UI 绑定和组合视图？

Posted 2023-02-22

技术标签:

【中文标题】javascript 框架：啥是 UI 绑定和组合视图？【英文标题】：javascript frameworks: What are UI bindings and composed views?javascript 框架：什么是 UI 绑定和组合视图？ 【发布时间】：2012-02-19 06:38:07 【问题描述】：

我在读这个：

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

我正在使用backbone.js。我喜欢它，虽然它需要太多的样板。无论如何。

这篇文章的作者似乎非常重视 UI 绑定和组合视图。

我想我知道 ui 绑定的基本优势，您可以在模型更改时更改视图的一小部分，而无需重新渲染整个视图。我不一定明白这一点。如果您的视图很大，也许您应该制作较小的视图？我看过 knockoutjs 的代码，里面到处都是丑陋的数据绑定东西。 emberjs 是如何处理的？有例子吗？

我不知道他所说的组合视图是什么意思，有人可以解释一下吗？

组合视图 - 像所有软件开发人员一样，我喜欢创建模块化的可重用代码。因此，在编写 UI 时，我会喜欢能够组合视图（最好在模板层）。这还应该包含丰富视图组件的潜力等级制度。这方面的一个例子是可重复使用的分页小部件。

有例子吗？

谢谢

编辑：

这会有助于制作像组合视图这样的东西吗？

https://github.com/tbranyen/backbone.layoutmanager

【问题讨论】：

我也没有完全理解，但是玩转backbone.js 模型绑定很有用。模型内容会自动链接到视图中的表单元素。 Addy Osmani 的Backbone Aura 也可能解决组合视图问题。我相信它还可以为不同结构的 UI 绑定提供替代方案。它为 Backbone 提供了一个更加基于小部件的系统。 【参考方案1】：

组合视图用于将视图划分为可以重复使用或适应不同场景的小块。

例如，在您正在编辑用户的表单中，您可以为地址字段创建一个视图，然后从主页/模板中调用它。作者也提到了分页作为示例，在这种情况下，您可以创建一个模型，该模型知道如何在页面之间切换时处理检索数据，并将其应用于页面中的表格。

关于“丑陋”的数据绑定代码，主干需要知道如何将自己附加到现有标记以及如何在事件发生时对其进行修改。

也许这个例子会有所帮助： http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/

【讨论】：

【参考方案2】：

传统的网页是单一的。用户调用页面，服务器构建页面，浏览器呈现页面。这里作者指的是把这种代码分解成一组视图。因此，您的页面由多个部分组成。每个部分都独立渲染和更新。或者一个模型更改可以触发部分或全部部分的一系列更新。

基本上，这允许您在网络上创建“桌面”类型的应用程序。而且您不必求助于 iframe hack 来执行此操作。

Gmail 和 Google Reader 是使用组合视图构建的 Web 应用程序的很好示例。

【讨论】：

感谢您的帮助。不过，我仍在寻找更具体的答案。骨干.js 感觉它已经可以完成你所描述的。我有兴趣了解它的不足之处以及 emberjs 或类似产品如何改进它。【参考方案3】：

我为 Backbone.js 创建了 LayoutManager，因为我也想合成视图。