重用Backbone.js控件和小部件

Question

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

我的团队维护着一个大型Web应用程序,主要用服务器端代码编写,但我们发现我们正在做越来越多的客户端工作.我们有几个用jQuery编写的大型UI组件,它们实际上太复杂了,只需要一个DOM操作库来维护.我们需要一个客户端应用程序框架.

jQuery插件模型提供的一个好处是易于重用.您可以使用适当的ID创建一些HTML元素并将其连接起来$(function(){}).如果采用Backbone,我们肯定需要用Backbone来实现类似的功能.

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

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

你可以构建Backbone控件并将它们打包为jQuery插件吗？有关这种架构的可用资源吗？

Answer 1

对我来说,使用Backbone最好的部分之一就是你所描述的.Backbone的面向对象使得构建特定的"小部件"或其他可重用的代码片非常容易,您可以将事件/模板/数据绑定到该代码片.您不一定要制作这些jQuery插件,因为它不会提供比Backbone的语法更多的好处.

例如,您可以构建一个控件类,并绑定一个click事件来触发它的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插件)

这是一个真正简单的例子来说明工作流程是什么,你可以用骨干的模型/收藏和下划线的模板引擎真的激烈创造一些真正强大的动力和可重用的类.