8

Backbone.jsについて学びながら、最新バージョンのBackbone（0.9.2）にバンドルされているTodosサンプルアプリケーションを使用しています。私の質問は、Todosコレクションにモデルを追加するときにアプリがレンダリングイベントを2回発生させるように設計されているのはなぜですか？

この行をTodoViewのレンダリング関数内に配置すると、次のようになります。

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

次に「レンダリング！」コンソールに2回表示されます。これは、ビューがモデルの変更イベントをビューのレンダリングにバインドするためだと理解しています。

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

そして、renderはaddOneで呼び出され、Todosのaddイベントにバインドされます。

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

しかし、このダブルレンダリングデザインは標準的な方法ですか？ビューは作成時（またはDOMへの入り口）にレンダリングする必要があり、基になるモデルが変更された場合は再度レンダリングする必要があるようです。この場合、何も変更されていませんが、renderが2回呼び出されています。

繰り返しになりますが、私はバックボーンを学んでいるだけなので、混乱につながる基本的な誤解があるかもしれません。

4

2 に答える 2

5

うーん、ちょっと見てみました。あなたはこれが起こるのは正しいです、そしてそれは標準的な習慣ではありません。理由は少しわかりにくいので、我慢してください;）

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ください。通常、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これが（2番目の）イベントをトリガーするものです。

createを次のように変更することで、これが発生しないようにすることができます。

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

于 2012-04-19T15:45:04.100 に答える
1

再レンダリングは発生しないはずです。

もう少しデバッグしてみてください。変更イベントを次のようなラッパーメソッドにバインドしてみてください。

initialize: function(){
  this.model.bind( "change", this.renderWrapper, this );
}, 

renderWrapper: function(){
  console.log( "in the renderWrapper" );
  this.render();
}

他の理由ではなく、変更イベントバインドrender()のために2番目が作成されたことを確認します。

于 2012-04-19T15:09:50.710 に答える