编辑 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-pane
上。至于将模型传递给GridViewContainer
,我想我可以将它们包装在composite model
中,然后将后者作为options
对象的一部分传递给GridViewContainer
视图。下一步是什么?
Product
,Order
,Category
模型具有不同的属性,具有不同的编辑形式以及可能的事件处理。这带来了特异性。我应该在每个集合中使用[EntityName]ListView
,然后将其附加到GridViewContainer
视图吗?
ASIDE 我在服务器端使用
jquery.js
,underscore.js
,backbone.js
,require.js
和ASP.NET MVC 4
。 我不使用Marionette.js
答案 0 :(得分:3)
我建议为每个模型创建一个视图。 您可以创建一个抽象,其中包含表创建等共享内容。 每个视图都扩展了抽象而不是Backbone.View。
var myAbstract = Backbone.View.extend({...})
var productsView = myAbstract.extend({...})
然后创建一个视图,处理包装器(Tabs)。