我使用没有包装器或框架的干净主干。
所以我创建了一个网站来管理一些产品。为此,我有两个动态页面:
add.php
edit.php
这些页面是独立的主干应用程序。
在这两个页面中,都有一个元素显示产品类别。通常它是一个下拉列表。
接下来,我将描述我的脚本的大致结构。很简单。
js
+- models
| +- Category.js
| ...
+- collections
| +- Categories.js
| ...
+- views
| +- CategoriesView.js
| ...
CategoryView.js包含:
App.Views.CategoriesViews = Backbone.View.extend({
template: _.template($('#tpl-categories').html()),
events: {
'change select': 'toggle'
},
initialize: function () {
_.bindAll(this, 'render');
this.collection.on('reset', this.render);
},
render: function () {
this.$el
.html(this.template({ collection: this.collection.toJSON() }));
return this;
},
toggle: function () {
// Some actions here
var catId = this.$el.children('select').val();
App.trigger('toggleCategories', catId);
}
});
视图的初始化如下所示:
new App.Views.CategoriesViews({
el: $('#select-box-cats'),
collection: new App.Collections.Categories
});
由于此元素在两个页面(add.php 和 edit.php)上都适用,因此对它们都适用。
我们假设模板的名称可以在两个页面上设置相同:
<script type="text/template" id="tpl-categories">
虽然我认为这不是一个好习惯。
好吧,最后我的问题。
如果这些页面之一需要向视图添加事件处理程序会发生什么。例如:
initialize: function () {
_.bindAll(this, 'render', 'action');
this.collection.on('reset', this.render);
this.collection.on('request', this.action);
},
request
我在收藏中添加了一个事件。但是,此事件不应出现在其他页面上。
该怎么办?要创建一个单独的视图文件与更改页面的需要?但是它违反了 DRY 的原则,并且产生了大量的客户端代码!