Backbone 作为一种 Web 应用程序开发框架变得越来越流行。随着这种流行，无数的扩展和插件来增强框架的功能，并填补其他人认为需要填补的漏洞。让我们来看看一些最佳选择。
由 Derick Bailey 开发，这个扩展相当大，是我个人最喜欢的。 Derick 决定填补他认为存在的所有最大漏洞，而不是向 Backbone 添加一两个功能。以下是他在 GitHub 项目的自述文件中对此的说法。
“Backbone.Marionette 是 Backbone.js 的复合应用程序库，旨在简化大型 JavaScript 应用程序的构建。它是我 (Derick Bailey) 使用 Backbone 构建的应用程序中发现的常见设计和实现模式的集合，并包括受复合应用程序架构启发的各种部分，例如 Microsoft 的“Prism”框架。”
让我们仔细看看 Marionette 为我们提供了什么：
我只触及了 Marionette 功能的皮毛。我绝对建议前往 GitHub 并阅读他们在 Wiki 上的文档。
此外，Andrew Burgess 在他的 Tuts+ Premium 高级骨干模式和技术课程中介绍了 Marionette。
Backbone.Validation 旨在填补一小部分问题：即模型验证。 Backbone 有多个验证扩展，但这个扩展似乎赢得了社区的最多尊重。
实际上，您不必为模型编写validate方法，而是可以为模型创建validation属性，该属性是一个对象，指定您希望验证的每个属性以及验证列表每个属性的规则。您还可以为每个属性指定错误消息，并传入自定义函数来验证单个属性。您可以看到下面的示例，该示例是根据其网站上的示例之一修改的。
var SomeModel = Backbone.Model.extend({ validation: { name: { required: true }, 'address.street': { required: true }, 'address.zip': { length: 4 }, age: { range: [1, 80] }, email: { pattern: 'email', // supply your own error message msg: "Please enter a valid email address" }, // custom validation function for `someAttribute` someAttribute: function(value) { if(value !== 'somevalue') { return 'Error message'; } } } });
有无数的内置验证器和模式可供您检查，甚至还有一种方法可以使用您自己的全局验证器来扩展列表。这个 Backbone 插件并没有让验证变得很有趣，但它确实消除了不添加验证的任何借口。请访问他们的网站以获取更多示例以及如何使用这个精彩工具的更深入说明。
Backbone.LayoutManager 就是为了让 Backbone 的视图变得更好。与 Backbone.Marionette 一样，它引入了清理代码以防止内存泄漏，处理所有样板文件，并只为您留下配置和特定于应用程序的代码。与 Marionette 不同，LayoutManager 特别关注视图。
因为 LayoutManager 仅关注视图，所以它可以比 Marionette 为视图做更多的事情。例如，当您想要从外部文件动态加载模板时，LayoutManager 能够执行异步渲染。
LayoutManager 还可以处理子视图，尽管方式与 Marionette 非常不同。但无论哪种方式，它主要是配置，这使得事情变得非常简单，并且消除了您需要做的 90% 的工作（如果您试图自己实现这一切）。请看下面一个向视图添加三个子视图的简单示例：
Backbone.Layout.extend({ views: { "header": new HeaderView(), "section": new ContentView(), "footer": new FooterView() } });
像往常一样，请务必参阅 GitHub 页面和文档以了解更多信息。
Backbone.ModelBinder 在模型中的数据和视图显示的标记之间创建链接。您已经可以通过绑定到模型上的更改事件并再次渲染视图来完成此操作，但 ModelBinder 更高效且更易于使用。
看一下下面的代码：
var MyView = Backbone.View.extend({ template: _.template(myTemplate), initialize: function() { // Old Backbone.js way this.model.on('change', this.render, this); // or the new Backbone 0.9.10+ way this.listenTo(this.model, 'change', this.render); }, render: function() { this.$el.html(this.template(this.model.toJSON())); } });
这种方法的问题在于，每当更改单个属性时，我们都需要重新渲染整个视图。此外，在每次渲染时，我们都需要将模型转换为 JSON。最后，如果希望绑定是双向的（当模型更新时，DOM 也会更新，反之亦然），那么我们需要向视图添加更多逻辑。
此示例使用 Underscore 的template函数。让我们假设我们传递给它的模板如下所示：
使用标签<%=和%>使template函数将这些区域替换为我们从模型发送的 JSON 中存在的firstName和lastName属性。我们假设该模型也具有这两个属性。
使用 ModelBinder，我们可以删除这些模板标签并以普通 HTML 形式发送。 ModelBinder 将查看input标记上的name属性的值，并自动将该属性的模型值分配给该标记的value属性。例如，第一个input的name设置为“firstName”。当我们使用 ModelBinder 时，它会看到这一点，然后将input的value设置为模型的firstName属性。
下面，您将看到我们之前的示例在切换到使用 ModelBinder 后的外观。另外，要意识到绑定是双向的，因此如果input标签更新，模型将自动为我们更新。
HTML 模板：
JavaScript 视图：
var MyView = Backbone.View.extend({ template: myTemplate, initialize: function() { // No more binding in here }, render: function() { // Throw the HTML right in this.$el.html(this.template); // Use ModelBinder to bind the model and view modelBinder.bind(this.model, this.el); } });
现在我们有了干净的 HTML 模板，我们只需要一行代码就可以使用modelBinder.bind将视图的 HTML 和模型绑定在一起。modelBinder.bind采用两个必需参数和一个可选参数。第一个参数是将绑定到 DOM 的数据的模型。第二个是将递归遍历的 DOM 节点，搜索要进行的绑定。最后一个参数是binding对象，如果您不喜欢默认用法，它指定如何完成绑定的高级规则。
ModelBinder 不仅仅可以用于input标签。它适用于任何元素。如果元素是某种类型的表单输入，例如input、select或textarea，它将相应地更新这些元素的值。如果您绑定到一个元素，例如div或span，它会将模型的数据放置在该元素的开始和结束标记之间（例如[数据在此处] )。
Backbone.ModelBinder 背后的功能比我在这里演示的要强大得多，因此请务必阅读 GitHub 存储库上的文档以了解所有相关信息。
事情就这样结束了。我只介绍了少数扩展和插件，但这些是我认为最有用的。
Backbone 格局在不断变化。如果您想查看各种可用 Backbone 扩展的完整列表，请访问此 wiki 页面，Backbone 团队会定期更新该页面。
以上是通过扩展增强主干以改善体验的详细内容。更多信息请关注PHP中文网其他相关文章！
