我正在使用Backbone来显示项目列表,由服务器上的JSON填充。
//Models
var Note = Backbone.Model.extend();
var NoteList = Backbone.Collection.extend({
model: Note,
url: "http://www.myserver.com/notes/notes.json"
});
var Notes = new NoteList;
//Views
var NoteView = Backbone.View.extend({
tagName: "li",
template: _.template($('#noteTemplate').html()),
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var AppView = Backbone.View.extend({
el: $("#specificationNotes"),
noteTemplate: _.template($('#noteTemplate').html()),
initialize: function() {
this.listenTo(Notes, 'reset', this.addAll);
this.listenTo(Notes, 'all', this.render);
Notes.fetch({reset:true});
},
addOne: function(note) {
var view = new NoteView({model: note});
this.$("#notesList").append(view.render().el);
},
addAll: function() {
Notes.each(this.addOne, this);
}
});
var App = new AppView;
初始提取抓取内容正确并显示列表。我正在使用一个jQuery对话框来“添加注释”,它简单地POST到一个RESTful API,在ajax发布成功后我调用了
Notes.fetch();
并且模型已更新,但视图不会更改。
答案 0 :(得分:1)
你的AppView没有渲染方法,所以你的第一次获取会因为处理程序绑定到'reset'事件而导致绘制,但是第二次没有。这是一个蛮力的一个:
render: function() {
this.$el.html(""); // so we don't readd the same items on re-render
this.addAll();
}
效率低下,因为它每次都会从头开始重新绘制所有音符,但它至少应该让你在屏幕上看到实时更改。也许替换
this.listenTo(Notes, 'reset', this.addAll);
this.listenTo(Notes, 'all', this.render);
带
this.listenTo(Notes, 'reset', this.render);
this.listenTo(Notes, 'sync', this.render);