Backbone.js的火灾对集合添加渲染两次 [英] Backbone.js fires render twice on collection add

问题描述

我与骨干（0.9.2）的最新版本捆绑托多斯示例应用程序工作，同时了解骨干.js文件。我的问题是，为什么在应用设计中加入了一个模型来的采集托多斯时，触发render事件两次？

I am working with the Todos example application bundled with the latest version of Backbone (0.9.2) while learning about Backbone.js. My question is, why is the app designed to fire the render event twice when adding a model to the Todos collection?

如果我把TodoView的渲染函数内这一行：

If I place this line within the TodoView's render function:

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

然后渲染！在控制台中出现两次。我明白这是因为视图绑定模型的变化事件视图的渲染：

Then "Rendering!" appears twice in the console. I understand this is because the view binds the model's change event to the view's render:

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

和渲染被称为addOne，这势必给托多斯添加事件：

And render is called in addOne, which is bound to the Todos' add event:

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

但是，这是双重渲染设计标准的做法？这似乎是认为应该在创建渲染（或进入了DOM），然后再次如果底层模型更改。在这种情况下，没有被改变，但渲染被调用两次。

But is this double rendering design standard practice? It seems like the view should be rendered on creation (or entrance into the DOM), and then again if the underlying model changes. In this case, nothing is being changed, but render is being called twice.

再次我刚学骨干，所以我可能是导致我的困惑一个基本的误解。

Again, I am just learning Backbone, so I may have a basic misunderstanding that is leading to my confusion.

推荐答案

嗯，有一个快速的样子。你是正确的，出现这种情况，也没有它不是标准的做法。
原因是有些晦涩，所以多多包涵;）

Hm, had a quick look. You are right that this happens, and no it's not standard practice. The reason is a bit obscure, so bear with me ;)

待办事项应用程序使用骨干网的localStorage。当您尝试在应用程序中添加一个新的项目它会调用：

The todo app is using backbone-localstorage. When you try adding a new item in the app it calls:

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

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

注意 Todos.create 。通常，创建将一个模型添加到集合，以及保存在服务器上。在添加事件将因此被触发。它发生虽然那骨干网的localStorage确实对下列创建：

Notice the Todos.create. Normally a create will add a model to the collection as well as save it on the server. The add event will thus be triggered. It happens though that backbone-localstorage does the following on create:

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

注意 model.set 给模型的ID。这是什么触发（第二）更改事件。

Notice the model.set to give the model an id. This is what triggers the (second) change event.

您可以通过更改创建办阻止这种情况发生：

You can stop this from happening by changing create to do:

如果model.id = GUID（）（model.id！）;

这篇关于Backbone.js的火灾对集合添加渲染两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！