Backbone.js在集合添加时触发两次渲染

Question

在学习Backbone.js 时,我正在使用捆绑了最新版Backbone(0.9.2)的Todos示例应用程序.我的问题是,为什么应用程序设计为在向Todos集合添加模型时触发渲染事件两次？

如果我将此行放在TodoView的渲染功能中:

// Re-render the titles of the todo item.
render: function() {
  console.log("Rendering!");
  this.$el.html(this.template(this.model.toJSON()));

然后"渲染!" 在控制台中出现两次.我理解这是因为视图将模型的change事件绑定到视图的渲染:

initialize: function() {
  this.model.bind('change', this.render, this);

并且在addOne中调用render,它绑定到Todos的add事件:

addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
},

但这是双重渲染设计的标准做法吗？看起来应该在创建(或进入DOM)时呈现视图,然后如果底层模型发生更改则再次呈现.在这种情况下,没有任何更改,但渲染被调用两次.

再一次,我只是学习Backbone,所以我可能会有一个基本的误解,导致我的困惑.

Answer 1

嗯,快看一下.你是对的,这种情况发生了,不,这不是标准做法.原因有点模糊,所以忍受我;)

todo应用程序正在使用backbone-localstorage.当您尝试在应用中添加新项目时,它会调用:

createOnEnter: function(e) {
  if (e.keyCode != 13) return;
  if (!this.input.val()) return;

  Todos.create({title: this.input.val()});
  this.input.val('');
},

请注意Todos.create.通常,a create会将模型添加到集合中,并将其保存在服务器上.add因此将触发该事件.虽然backbone-localstorage执行以下操作但会发生这种情况create:

create: function(model) {
  if (!model.id) model.set(model.idAttribute, guid());
  this.data[model.id] = model;
  this.save();
  return model;
},

注意model.set给模型一个id.这是触发(第二)change事件的原因.

您可以通过更改create来阻止这种情况发生:

if (!model.id) model.id = guid();