重用Backbone.js控件和小部件

Question

有没有一个好的模型可以重用用Backbone.js编写的UI组件？

我的团队维护了一个大型web应用程序，该应用程序大部分是用服务器端代码编写的，但我们发现我们正在做越来越多的客户端工作。我们有几个用jQuery编写的大型UI组件，它们非常复杂，无法仅用DOM操作库进行维护。我们需要一个客户端应用程序框架。

jQuery插件模型提供的一个好处是易于重用。您只需创建几个具有适当ID的HTML元素，然后将它们与$(function(){})连接起来。如果我们采用Backbone，我们肯定需要实现类似的目标。

大多数例子都展示了如何完全在Backbone中构建应用程序，这很好，但我们不会很快用JavaScript重新实现我们的应用程序。我们对客户端框架的使用将局限于包含大量业务逻辑的复杂UI控件。

另一个考虑因素是我们有一个JavaScript绑定解决方案。我担心，将许多Backbone元素捆绑在一起可能意味着我们最终会在后台加载和运行无头控件。

你能构建主干控件并将它们打包为jQuery插件吗？关于这种体系结构，有什么好的资源吗？

Answer 1

对我来说，使用Backbone最棒的部分之一就是您所描述的内容。Backbone面向对象的特性使得构建一个特定的"小部件"或其他可重用的代码片段变得非常容易，您可以将事件/模板/数据绑定到这些代码片段。您不一定想要制作这些jQuery插件，因为它不会比Backbone的语法带来太多好处。

例如，您可以构建一个控制类，并绑定一个点击事件来触发它上的foo方法

var Control = Backbone.View.extend({
    id:null,
    events: { 
        'click' : 'foo'
    },
    foo: function(){
        console.log(this.id);
    }
})

每次您希望DOM元素使用这种行为时，都会创建一个新的Control对象，并使用jQuery将其绑定到元素。

//I say foo when you click me
var foo = new Control({el: $("#foo"), id:'foo' });
//I say bar when you click me
var bar = new Control({el: $("#bar"), id:'bar' });

（您可以将这些调用封装到jQuery插件中）

这是一个非常简单的例子，展示了工作流程，您可以使用Backbone的模型/集合和Undercore的模板引擎来创建一些非常强大的动态&可重用类。