实现具有多个集合的主视图。骨干网.js答案

【问题标题】：Implementing a master view with multiple collections. Backbone.js实现具有多个集合的主视图。骨干网.js
【发布时间】：2013-05-13 08:48:43
【问题描述】：

编辑 my humble mockup 我想要实现的内容

我已经定义了这样一个视图：

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>

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

目标

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

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

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

【问题讨论】：

我在这里回答了一个关于带有主干的选项卡式布局的类似问题：stackoverflow.com/a/16066932/693799

标签： javascript jquery backbone.js user-interface

【解决方案1】：

我建议为每个模型创建一个视图。你可以创建一个抽象来保存共享的东西，比如创建表。每个视图都扩展了您的摘要而不是 Backbone.View。

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

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

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

【讨论】：