web-dev-qa-db-ja.com

複数作成せずにモデルの.change（）トリガーをビューの.render（）関数にバインドする方法はありますか？

ビューは通常、レンダリングする前にこれらの属性を持つオブジェクトを想定しています。

{ el: '#someelement', model: someModel }

ビューを使用すると、モデルのイベントをビュー内の関数にバインドすることもできます。

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

render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
},

renderFromModel: function() {
    var t = _.template($('#some-template').html());
    $('item-' + this.cid).html(t(this.toJSON()));
    return this;
},

問題は、レンダリングのためにビューを初めてインスタンス化するとき、モデルが含まれるオブジェクトを期待していることです。モデル内から呼び出された2回目のビューのレンダリングでは、ビューはレンダリングされません。このため、2つのrender（）関数を作成してしまいます。

Model.change（）イベントにも応答できる単一アイテムのレンダリングを実現するより良い方法はありますか？

backbone.js
29
rkw

underscore.jsのbindAllメソッドを呼び出して、レンダーメソッドが常にビューにバインドされるようにする必要があると思います。

SomeView = Backbone.View.extend({
  initialize: function(){
    _.bindAll(this, "render");
    this.model.bind('change', this.render);
  },

  render: function(){
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  }
});
39
Derick Bailey

より良い解決策は listenTo function を使用することです：

SomeView = Backbone.View.extend({
  initialize: function(){
    this.listenTo(this.model, 'change', this.render);
  },

  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

このようにして、ビューオブジェクトは作成したバインディングを認識し、それらすべてを stopListening関数 で削除でき、bindまたはbindAllを明示的に呼び出す必要はありません。最後になりましたが、私の意見ではコードはよりクリーンです。

13
Blacksonic

_.bind（）メソッドを使用してスコープを設定する

 this.model.bind('change', _.bind(this.render, this));
12
ant_Ti

バックボーン0.9.2（およびおそらくそれ以前）では、on()またはbind()関数（および対応するoff()またはunbind()も）呼び出し時にcontextに使用するオプションのthisパラメーターを受け取ります。

そう、

_SomeView = Backbone.View.extend({
  initialize: function(){
    _.bindAll(this, "render");
    this.model.bind('change', this.render);
  },

  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
_

になることができる

_SomeView = Backbone.View.extend({
  initialize: function(){
    this.model.bind('change', this.render, this);
  },

  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
_

on() のドキュメントを参照してください。

6
mybuddymichael

ビューにモデルインスタンスを作成する

var myapp.myView  = new View({
        model: new Model
    });

内部のBackbone.Viewを初期化するときに、これを追加します。変更があると呼び出されるレンダリングは、デフォルトからのモデル属性です。

this.model.bind('change', this.render,this)
0
user1452840