骨干JS，型号变化更新视图 [英] backbone js, Update view on model change
本文介绍了骨干JS，型号变化更新视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么我的看法是没有得到更新？
＆LT; HTML和GT; ＆LT;脚本SRC =./的jquery.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =./强调-min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =./ Backbone.js的＆GT;＆LT; / SCRIPT＆GT; ＆LT;风格＆GT;
表，TD {边界：1px的固体＃000;}
＆LT; /风格＆GT; ＆LT;身体GT;
＆LT; /身体GT; ＆LT;脚本＆GT; VAR rowTemplate =＆LT; TR＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT ; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT; ＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名字'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名' ＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT; ％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％ ＆GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT ; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类= '年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT ;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％ =年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT ;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; TD类='名称'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT; / TD＆GT;＆LT; / TR＆gt;中; / **查看重新presenting表* /
VAR的TableView = Backbone.View.extend（{ 标签名：'表'， 初始化：功能（）{
_.bindAll（在此，呈现，renderOne'）;
如果（this.model）{
this.model.on（'变'，this.render，这一点）;
的console.log（this.model）;
}
}， 渲染：功能（）{
this.collection.each（this.renderOne）;
返回此;
}， renderOne：函数（模型）{
VAR行=新RowView（{模式：模式}）;
这$ el.append（row.render（）$ EL）;
返回此;
}
}）; / **查看重新presenting该表中的行* /
VAR RowView = Backbone.View.extend（{
事件：{
点击。年龄：函数（）{的console.log（this.model.get（名字））;}
}， 渲染：功能（）{
。VAR HTML = _模板（rowTemplate，this.model.toJSON（））;
this.setElement（$（HTML））;
返回此;
}， 更新：功能（）{ }
}）; VAR数据= [
{'名'：'奥利'，'年龄'：25}，
{'名'：'奥利'，'年龄'：25}， ]; / **型号收集绘制* /
变种peopleCollection =新Backbone.Collection（数据）;
VAR的tableView =新的TableView（{集合：peopleCollection}）;
$（机构）追加（tableView.render（）$ EL）。 的console.log（peopleCollection.models [0] .SET（{'名'：'VJY'，'年龄'：25}））;
的console.log（peopleCollection.models [0]）; ＆LT; / SCRIPT＆GT; ＆LT; / HTML＆GT;
解决方案
您遗漏了几件事情。
- 行模板应该只呈现一行。表格模板重申其在collection.each（）。
- 您需要指定模型视图被捆绑。现在，当模型发生变化时，视野中的听的活动，并触发其渲染的动作。请注意，您没有指定一个模型，但在收集自动创建它传递的数据数组中每个元素的典范。
- 您正在尝试使用setElement渲染视图。渲染是通过你的模板的HTML到jQuery对象这是由视图中创建自动（简单此$。EL在code以下）。
＆LT; HTML和GT;
＆LT;脚本SRC =./的jquery.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =./ underscore.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =./ Backbone.js的＆GT;＆LT; / SCRIPT＆GT;
＆LT;风格＆GT;
表，
TD {
边框：1px的固体＃000;
}
＆LT; /风格＆GT;
＆LT;身体GT;＆LT; /身体GT;
＆LT;脚本＆GT;
VAR rowTemplate =＆LT; TR＆GT;＆LT; TD类='名'＆GT;＆LT;％=名称％GT;＆LT; / TD＆GT;＆LT; TD类='年龄'＆GT;＆LT;％=年龄％GT;＆LT ; / TD＆GT;＆下; / TR＆gt;中; VAR数据= [
{
'名'：'伯特，
时代：6
}，{
'名'：'厄尼'，
时代：7
}
]; / **型号收集绘制* /
变种peopleCollection =新Backbone.Collection（数据）; / **查看重新presenting表* /
VAR的TableView = Backbone.View.extend（{
标签名：'表'，
初始化：功能（）{
_.bindAll（在此，呈现，renderOne'）;
如果（this.model）{
this.model.on（'变'，this.render，这一点）;
的console.log（this.model）;
}
}，
渲染：功能（）{
this.collection.each（this.renderOne）;
返回此;
}，
renderOne：函数（模型）{
VAR行=新RowView（{
型号：型号
}）;
这$ el.append（row.render（）$ EL）;
返回此;
}
}）; / **查看重新presenting该表中的行* /
VAR RowView = Backbone.View.extend（{
事件：{
点击。年龄：功能（）{
的console.log（this.model.get（名字））;
}
}，
初始化：功能（）{
this.model.on（'变'，this.render，这一点）;
}，
型号：peopleCollection.models，
渲染：功能（）{
变种的html = _.template（rowTemplate，this.model.toJSON（））;
这$ el.html（HTML）;
返回此;
}，
}）; VAR的tableView =新的TableView（{
集合：peopleCollection
}）;
$（机构）追加（tableView.render（）$ EL）。 的console.log（peopleCollection.models [0] .SET（{
'名'：'斯塔特勒'，
时代：100
}））;
的console.log（peopleCollection.models [0]）;
＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
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>
解决方案
You were missing a few things.
- 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屋！
查看全文
