实现与多个集合主视图。 Backbone.js的 [英] Implementing a master view with multiple collections. Backbone.js

问题描述

  

修改 什么，我要实现我的卑微样机

---

我已经定义了这样一个观点：

 定义（['jQuery的'，'底线'，'骨干'，'文字！_templates / gv_container.html'，'引导/引导标签']，
功能（$，_，骨干，htmlTemplate，标签）{
    VAR GridViewContainer = Backbone.View.extend（{
        ID：'标签面板'，
        模板：_.template（htmlTemplate）
        事件：{点击ul.nav-选项卡的：tabClicked}，
        tabClicked：功能（E）{
            亦即preventDefault（）;
            $（e.target）的.tab（'秀'）;
        }，
        渲染：功能（）{
            这$ el.append（this.template）;
            返回此;
        }
    }）;
    返回GridViewContainer;
}）; //定义（...）
 

视图的模板看起来是这样的：

 ＆LT; UL类=净值资产净值的选项卡＆GT;
    ＆LT;李班=主动＆GT;＆LT; A HREF =＃产品＆GT;产品＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;！ - 其他选项 - ＆GT;
＆LT; / UL＆GT;
＆LT; D​​IV CLASS =标签内容＆GT;
    ＆LT; D​​IV CLASS =标签窗格激活ID =产品＆GT;
        ！＆LT;  - 表像{标题，几个特性，编辑|删除链接}行 - ＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;！ - 其他窗格......  - ＆GT;
＆LT; / DIV＆GT;
 

起初，我想我可能会（在一次作为通用模板对所有集合）使用它。

目标

我有三个类别：产品，类别，订单。我想插入他们每个人的桌子上单独的设置页窗格秒。对于通过模型 GridViewContainer 我想我可以在复合模型包装他们，只是通过后者作为的选项的一部分对象 GridViewContainer 视图。下一步是什么？

产品，订单，类别型号有不同性质，有不同的编辑形式和可能事件处理。这带来的特异性。我应该使用 [实体名称]的ListView 每个集合，然后将其追加到 GridViewContainer 看法？

---

  

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

解决方案

我会建议为每个模型的视图。
您可以创建一个抽象至极拥有像表创建共享的东西。
每个视图扩展了你的抽象，而不是Backbone.View。

  VAR myAbstract = Backbone.View.extend（{...}）
变种productsView = myAbstract.extend（{...}）
 

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

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

EDIT my humble mockup of what I want to implement

---

I have defined such a view:

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(...)

The view's template looks like this:

<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>

Initially I thought I might use it (as common template for all collections at once).

Goal

I have three collections: products, categories, orders. And I want to insert each of them as tables on separate tab-panes. As for passing models to GridViewContainer I think I can wrap them in a composite model and simply pass the latter one as a part of options object to GridViewContainer view. What's next?

Product, Order, Category models have different properties, have different edit forms and probably event handling. This brings specificity. Should I use [EntityName]ListView per collection and then append it to GridViewContainer view?

---

ASIDE I use jquery.js, underscore.js, backbone.js, require.js, and ASP.NET MVC 4 on server side. I don't use Marionette.js

解决方案

I would recommend to create a view for each model. You may create a abstract wich holds the shared stuff like table creation. Each view extends your abstract instead of Backbone.View.

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

Then create a view, handling the wrapper (Tabs).

Example: http://jsfiddle.net/DC7rN/

这篇关于实现与多个集合主视图。 Backbone.js的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！