Javascript 使用多个集合实现主视图。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(...)

视图的模板如下所示：

<ul class="nav nav-tabs">
    <li class="active"><a href="#products">Products</a></li>
    <!-- other tabs -->
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="products">
        <!-- table with rows like { title, few more properties, edit|remove links } -->
    </div>
    <!-- other panes ... -->
</div>

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

目标

我有三个系列：

产品

，

类别

，

订单

。我想在单独的

选项卡窗格

s中将它们作为表格插入。至于将模型传递给

GridViewContainer

，我想我可以将它们包装在一个

复合模型中

，然后将后者作为

选项

对象的一部分传递给

GridViewContainer

视图。下一步是什么

产品

，

订单

，

类别

模型具有不同的属性，具有不同的编辑形式，可能还有事件处理。这带来了特殊性。我是否应该对每个集合使用

[EntityName]列表视图

，然后将其附加到

GridViewContainer

视图

---

旁白 我在服务器端使用

jquery.js

，

underline.js

，

backbone.js

，

require.js

，以及

ASP.NET MVC 4

。 我不使用

marionete.js

---

我建议为每个模型创建一个视图。 您可以创建一个包含共享内容（如表创建）的摘要。 每个视图都扩展了抽象而不是主干.view

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

然后创建一个视图，处理包装（选项卡）

---

示例：

我在这里回答了一个关于带主干的选项卡式布局的类似问题：