我知道如何组合一个集合或者单个模型。通常情况下我可以将模型数据显示出来。但是我不太清楚如何获取集合并且将集合中的模型列表进行展示。
我需要遍历整个集合并且逐个渲染每个模型吗? 这部分应该包含在集合的渲染函数中吗?
或者说集合仅仅具有自己的视图,我需要将整个集合的数据填充到视图中吗?
一般而言,展示模型列表的正常方法是什么?
我知道如何组合一个集合或者单个模型。通常情况下我可以将模型数据显示出来。但是我不太清楚如何获取集合并且将集合中的模型列表进行展示。
我需要遍历整个集合并且逐个渲染每个模型吗? 这部分应该包含在集合的渲染函数中吗?
或者说集合仅仅具有自己的视图,我需要将整个集合的数据填充到视图中吗?
一般而言,展示模型列表的正常方法是什么?
根据我的经验,最好在收藏视图时引用每个模型的视图。
我目前正在处理的项目中的这段代码应该能帮助你更好地理解:
var MyElementsViewClass = Backbone.View.extend({
tagName: 'table',
events: {
// only whole collection events (like table sorting)
// each child view has it's own events
},
initialize: function() {
this._MyElementViews = {}; // view chache for further reuse
_(this).bindAll('add');
this.collection.bind('add', this.add);
},
render: function() {
// some collection rendering related stuff
// like appending <table> or <ul> elements
return this;
},
add: function(m) {
var MyElementView = new MyElementViewClass({
model: m
});
// cache the view
this._MyElementViews[m.get('id')] = MyElementView;
// single model rendering
// like appending <tr> or <li> elements
MyElementView.render();
}
});
采用这种方法可以更加高效地更新视图(只重新渲染表格中的一行而不是整个表格)。对于第二种策略,我已经编写了类似以下内容的代码:
var Goose = Backbone.Model.extend({ });
var Gaggle = Backbone.Collection.extend({
model: Goose;
};
var GaggleView = Backbone.View.extend({
el: $('#gaggle'),
template: _.template($('#gaggle-template').html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
}
};
var g = new Gaggle({id: 69);
g.fetch({success: function(g, response) {
gv = new GaggleView({model: g});
gv.render();
}});
<script type="text/template" id="gaggle-template">
<ul id="gaggle-list">
<% _.each(gaggle, function(goose) { %>
<li><%- goose.name %></li>
<% }); %>
</ul>
</script>
AppView.addAll
中的Todo
)。 - p3drosola_.bindAll
的地方。 - p3drosola我也觉得Backbone框架的这一部分很令人困惑。
这里有一个Todos代码示例。它使用了4个类:
这并不是世界上最好的第一次审查示例。特别是,它没有使用Router类来路由URL,也没有将模型类映射到REST资源。
但是最佳实践似乎是为集合中的每个成员保留一个视图,并直接操作这些视图创建的DOM元素。
this._MyElementViews: {};
应该是this._MyElementViews = {};
。 - jds