实现具有多个集合的主视图。 Backbone.js的

编辑 我想要实现的简单模型

---

我定义了这样一个观点：

define(['jquery', 'underscore', 'backbone', 'text!_templates/gv_container.html', 'bootstrap/bootstrap-tab'], function($, _, Backbone, htmlTemplate, tab) { var GridViewContainer = Backbone.View.extend({ id: 'tab-panel', template: _.template(htmlTemplate), events: { 'click ul.nav-tabs a': 'tabClicked' }, tabClicked: function(e) { e.preventDefault(); $(e.target).tab('show'); }, render: function() { this.$el.append(this.template); return this; } }); return GridViewContainer; }); // define(...) 

视图的模板如下所示：

 
 
Products
  
 
 
  
   

最初我以为我可以使用它（作为所有集合的通用模板）。

目标

我有三个系列： products ， categories ， orders 。 我想将它们中的每一个作为表插入到单独的tab-pane 。 至于将模型传递给GridViewContainer我想我可以将它们包装在一个composite model然后将后者作为options对象的一部分传递给GridViewContainer视图。 下一步是什么？

Product ， Order ， Category模型具有不同的属性，具有不同的编辑forms以及可能的事件处理。 这带来了特异性。 我应该在每个集合中使用[EntityName]ListView ，然后将其附加到GridViewContainer视图吗？

---

ASIDE我在服务器端使用jquery.js ， underscore.js ， backbone.js ， require.js和ASP.NET MVC 4 。 我不使用Marionette.js

Answer 1

我建议为每个模型创建一个视图。 您可以创建一个抽象，其中包含表格创建等共享内容。 每个视图都扩展了抽象而不是Backbone.View。

 var myAbstract = Backbone.View.extend({...}) var productsView = myAbstract.extend({...}) 

然后创建一个视图，处理包装器（Tabs）。

示例： http ： //jsfiddle.net/DC7rN/