重用Backbone.js控件和小部件

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

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

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

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

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

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

解决方法

对我来说,使用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插件)

这是一个非常简单的例子来展示工作流程,你可以通过Backbone的模型/集合以及Underscore的模板引擎来创建一些非常强大的动态&可重复使用的课程.

重用Backbone.js控件和小部件

解决方法

相关文章