Javascript 保存或删除集合中的模型时，主干视图不会更新
我已经搜索了StackOverflow和interwebz的其他成员，试图找到一个解决方案，但没有成功。我正在学习脊梁骨，似乎无法解决这个问题。它在RESTful CRUD操作上非常有效，只是当集合更新时，例如，如果有人发出POST请求向数据库添加记录，页面上不会有任何更改 据我所知，在model.save success回调中，我不需要显式声明任何内容，因为根据主干网的文档，它会自动更新模型所在的集合。为什么在我添加/编辑/删除时显示的页面上没有任何变化？啊！这是密码Javascript 保存或删除集合中的模型时，主干视图不会更新,javascript,backbone.js,Javascript,Backbone.js,我已经搜索了StackOverflow和interwebz的其他成员，试图找到一个解决方案，但没有成功。我正在学习脊梁骨，似乎无法解决这个问题。它在RESTful CRUD操作上非常有效，只是当集合更新时，例如，如果有人发出POST请求向数据库添加记录，页面上不会有任何更改 据我所知，在model.save success回调中，我不需要显式声明任何内容，因为根据主干网的文档，它会自动更新模型所在的集合。为什么在我添加/编辑/删除时显示的页面上没有任何变化？啊！这是密码 <html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="text" id="number" />
<input type="button" id="search_button" value="Add" />
<input type="button" id="edit_button" value="Edit" />
<input type="button" id="delete_button" value="Delete" />
</script>
<script type="text/template" id="row_template">
<tr>
<td><%= id %></td>
<td><%= name %></td>
<td><%= job %></td>
</tr>
</script>
<div id="view">
</div>
<table id="rows">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Jobs</td>
</tr>
</thead>
<tbody id="lmao">
</tbody>
</table>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script>
var lel = Backbone.Model.extend({ urlRoot: 'lol.php' });
//var x = new lel;
//var lee = Backbone.Mode.extend();
var rows = Backbone.Collection.extend({ model: lel, url: 'lol.php' });
dice = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(a){
this.$el.html($('#search_template').html());
},
events: {
'click input[value="Add"]': 'hay',
'click #search_input': 'gaz',
'click #edit_button': 'edit',
'click #delete_button': 'del'
},
gaz: function(){ $('#search_input').val('') },
hay: function(){
var self = this;
var x = new lel;
x.save({ name: $('#search_input').val(), id: null });
},
edit: function(){
var x = new lel;
x.save({ name: $('#search_input').val(), id: $('#number').val() }, { success: function(r){ alert(r.toJSON()); } });
},
del: function(){
var x = new lel({ id: $('#number').val() });
x.destroy({ success: function(r){ console.log(r.toJSON()); } });
}
});
var lmf = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
this.collection = new rows();
this.collection.on("change:all", function(){ alert('changed'); }, this);
this.collection.fetch({ success: this.render });
console.log(this.collection);
console.log(this.model);
},
render: function(){
var self = this;
_.each(this.collection.models, function(item){
//console.log('row '+item);
var dict = item.toJSON();
var template = _.template($('#row_template').html())
var html = template(dict);
self.$el.append(html);
});
},
addAll: function(){
var self = this;
self.$el.append('fafa');
//this.$el.html(this.model.get('id'));
}
});
//this.$el.html(self.collection.length);
var throz = new dice({ el: $('#view') });
var v = new lmf({ el: $('#lmao') });
</script>
</body>
</html>
this.listen to(this.collection, "add", this.render);
this.listen to(this.collection, "add", this.render);
this.listen to(this.model, "change", this.render);
在这里，您只需要渲染与模型关联的子视图，而不是整个集合。如果要查找要更改的特定属性，请侦听更改：attr，其中attr是要侦听的属性的名称 集合上唯一的事件绑定是this.collection.onchange:all。。。这就是监听all属性的变化。你需要倾听其他事件。然后切换到listenTo并摆脱所有旧的var self=这几乎总是有更好的方法来处理这些事情。
this.listen to(this.model, "change", this.render);