是否有一个很好的模型可以重用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' });
这是一个非常简单的例子来展示工作流程,你可以通过Backbone的模型/集合以及Underscore的模板引擎来创建一些非常强大的动态&可重复使用的课程.
