骨干 js，更新模型更改视图 [英] backbone js, Update view on model change
本文介绍了骨干 js，更新模型更改视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么我的视图没有更新?
Why my view is not getting updated?
<html>
<script src="./jquery.js"></script>
<script src="./underscore-min.js"></script>
<script src="./backbone.js"></script>
<style>
table,td {border:1px solid #000;}
</style>
<body>
</body>
<script>
var rowTemplate="<tr><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td></tr>";
/** View representing a table */
var TableView = Backbone.View.extend({
tagName: 'table',
initialize : function() {
_.bindAll(this,'render','renderOne');
if(this.model) {
this.model.on('change',this.render,this);
console.log(this.model);
}
},
render: function() {
this.collection.each(this.renderOne);
return this;
},
renderOne : function(model) {
var row=new RowView({model:model});
this.$el.append(row.render().$el);
return this;
}
});
/** View representing a row of that table */
var RowView = Backbone.View.extend({
events: {
"click .age": function() {console.log(this.model.get("name"));}
},
render: function() {
var html=_.template(rowTemplate,this.model.toJSON());
this.setElement( $(html) );
return this;
},
update : function() {
}
});
var data = [
{'name': 'Oli', 'age': 25},
{'name': 'Oli', 'age': 25},
];
/** Collection of models to draw */
var peopleCollection = new Backbone.Collection(data);
var tableView = new TableView({collection: peopleCollection});
$("body").append( tableView.render().$el );
console.log(peopleCollection.models[0].set({'name': 'VJY', 'age': 25}));
console.log(peopleCollection.models[0]);
</script>
</html>
推荐答案
您遗漏了一些东西.
- 行模板应该只呈现一行.表模板在 collection.each() 中重复它.
- 您需要指定视图绑定到哪个模型.现在，当模型更改时，视图侦听"该事件并触发其渲染操作.请注意，您没有指定模型，但集合会自动为其传递的数据数组中的每个元素创建一个模型.
- 您试图使用 setElement 来渲染视图. 渲染就像将模板的 HTML 传递给视图自动创建的 jQuery 对象一样简单(下面代码中的 this.$el).
- The row template should only render one row. The Table template repeats it in collection.each().
- You needed to specify which model the View was tied to. Now, when the model is changed, the View "listens to" that event and fires its render action. Note that you didn't specify a model, but the collection auto creates a model for each element in the data array it's passed.
- You were trying to use setElement for rendering the view. Rendering is as simple as passing your template's HTML to the jQuery object which is auto created by the view (this.$el in code below).
<html>
<script src="./jquery.js"></script>
<script src="./underscore.js"></script>
<script src="./backbone.js"></script>
<style>
table,
td {
border: 1px solid #000;
}
</style>
<body></body>
<script>
var rowTemplate = "<tr><td class='name'><%= name %></td><td class='age'><%= age %></td></tr>";
var data = [
{
'name': 'Bert',
'age' : 6
}, {
'name': 'Ernie',
'age' : 7
}
];
/** Collection of models to draw */
var peopleCollection = new Backbone.Collection(data);
/** View representing a table */
var TableView = Backbone.View.extend({
tagName: 'table',
initialize: function () {
_.bindAll(this, 'render', 'renderOne');
if (this.model) {
this.model.on('change', this.render, this);
console.log(this.model);
}
},
render: function () {
this.collection.each(this.renderOne);
return this;
},
renderOne: function (model) {
var row = new RowView({
model: model
});
this.$el.append(row.render().$el);
return this;
}
});
/** View representing a row of that table */
var RowView = Backbone.View.extend({
events: {
"click .age": function () {
console.log(this.model.get("name"));
}
},
initialize: function () {
this.model.on('change', this.render, this);
},
model: peopleCollection.models,
render: function () {
var html = _.template(rowTemplate, this.model.toJSON());
this.$el.html(html);
return this;
},
});
var tableView = new TableView({
collection: peopleCollection
});
$("body").append(tableView.render().$el);
console.log(peopleCollection.models[0].set({
'name': 'Statler',
'age' : 100
}));
console.log(peopleCollection.models[0]);
</script>
</html>
这篇关于骨干 js，更新模型更改视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
