gpt4 book ai didi

javascript - backbone js,更新模型更改 View

转载 作者:可可西里 更新时间:2023-11-01 02:33:43 24 4
gpt4 key购买 nike

为什么我的 View 没有更新?

    <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() 中重复它。
  • 您需要指定 View 绑定(bind)到哪个模型。现在,当模型更改时, View “监听”该事件并触发其呈现操作。请注意,您没有指定模型,但集合会自动为它传递的数据数组中的每个元素创建一个模型。
  • 您正尝试使用 setElement 来呈现 View 。呈现就像将模板的 HTML 传递给 View 自动创建的 jQuery 对象一样简单(下面代码中的 this.$el) .
<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>

关于javascript - backbone js,更新模型更改 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16591359/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com