javascript Backbone.js 如何连接 View 到 Model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6784635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does Backbone.js connect View to Model
提问by William Sham
I am trying to learn backbone.js through the following example. Then I got stuck at the point
我正在尝试通过以下示例学习backbone.js。然后我卡在了这一点上
ItemView = Backbone.View.extend
why you can use this.model.get? I thought this is referring to the instance of ItemView that would be created. Then why would ItemView has a model property at all?!!
为什么你可以使用this.model.get？我认为这是指将创建的 ItemView 实例。那为什么 ItemView 会有一个模型属性呢？！！
(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});
var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render');
},
render: function(){
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this;
}
});
var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);
采纳答案by lorefnon
The way Backbone implements the MVC architecture, Views may be attached to datasets(Collections) as well as individual model instances. Models typically represet records retrieved from database but in custom implementations may be any data objects.
Backbone 实现 MVC 架构的方式，视图可以附加到数据集（集合）以及单个模型实例。模型通常代表从数据库检索的记录，但在自定义实现中可以是任何数据对象。
As you see, it is a very obvious question that when you actually have a view that represents a whole dataset so why should it be created out by nesting of views, each representing a single model instance. It is not necessary to do things in this way. You can have a non-nested view that represents a whole dataset which updates itself when any item in the collection is changed.
如您所见，这是一个非常明显的问题，当您实际上拥有一个代表整个数据集的视图时，为什么要通过嵌套视图创建它，每个视图代表一个模型实例。没有必要以这种方式做事。您可以拥有一个表示整个数据集的非嵌套视图，当集合中的任何项目发生更改时，该视图会自行更新。
But now, think ... would it actually make sense to re-render the whole view just because one single entity in the collection has changed. Suppose you have a collection of thousands of records that is being represented by a datagrid view. Dont you think that re-rendering the entire datagrid with every change in collection will increase the latency of the application.
但是现在，想想……仅仅因为集合中的一个实体发生了变化而重新渲染整个视图是否真的有意义。假设您有一个由数据网格视图表示的数千条记录的集合。您不认为每次更改集合都重新渲染整个数据网格会增加应用程序的延迟吗？
So, it is in many cases a more preferred option to have a nested view object the way your example has implemented. So when a single model instance changes, the corresponding view has to be re-rendered and not the whole composite view.
因此，在许多情况下，以您的示例实现的方式拥有嵌套视图对象是更受欢迎的选择。因此，当单个模型实例更改时，必须重新渲染相应的视图，而不是整个复合视图。
Also, if you want to provide the user, UI elements that operate on data sets as well as individual elements, it is more convenient and more sensible to implement in this nested view manner, where you would provide UI controls for operating on datasets at the composite view level and the controls for individual data elements at the element view level.
此外，如果您想为用户提供操作数据集的 UI 元素以及单个元素，以这种嵌套视图的方式实现更方便、更明智，您将在其中提供对数据集进行操作的 UI 控件。复合视图级别和元素视图级别的单个数据元素的控件。
Hope that clarifies your question.
希望能澄清你的问题。
回答by Russell
The model is usually passed to the View as a constructor argument like this.
模型通常像这样作为构造函数参数传递给视图。
var item = new Item();
var view = new ItemView({ model : item });
other parameters can be passed as well, check out the docs at http://backbonejs.org/#View.
也可以传递其他参数，请查看http://backbonejs.org/#View 上的文档。
回答by Daniel Ozean
This creates a new instance of a ListView and adds the model property. Now you have a relation to the model and can make use of "this.model".
这将创建一个 ListView 的新实例并添加模型属性。现在您有了与模型的关系并且可以使用“this.model”。
var view = new ListView({model: Item});
回答by Evert
A model stands for a single item in a list, a collection is the entire list. You're creating a listview for the collection, and an itemview for the item.
模型代表列表中的单个项目，集合是整个列表。您正在为集合创建一个列表视图，并为该项目创建一个项目视图。
The way you ask your question is a bit odd, why is it confusing to you?
你问问题的方式有点奇怪，为什么会让你感到困惑？
回答by Dima Shvets
i think it's automaticaly happens, because view name begins with models name and containg word View
我认为这是自动发生的，因为视图名称以模型名称开头并包含单词 View
