ネストされたモデルからの変更を聴くことは、私がオブジェクトであるモデルの属性を持つ

Question

属性：私はこのようなlistenToを使用する場合

name : "testing", 
orderCondition: { 
    minOrderAmount: 20, 
    deliveryCostRequire: "MIN_ORDER_AMOUNT", 
    deliveryCostAmount: 5.55 
} 

、render機能が

this.listenTo(this.model, "change:orderCondition", this.render); // NO FIRING 

しかし、ときに私と呼ばれていません他の属性にlistenToを使用すると動作します。 listenToは、ネストされたオブジェクトの変更を参照してください単純な属性でそれらを見ていないのはなぜ

this.listenTo(this.model, "change:name", this.render); // FIRING 

？

Answer 1

ネストされたオブジェクトの属性トリガーをchangeイベントにする簡単な方法は、オブジェクト全体を新しいものに置き換えることです。シンプルsetと最も簡単な方法：

model.set('orderCondition', _.extend({}, model.get('orderCondition'), { 
    deliveryCostRequire: "TOTAL_ORDER_AMOUNT" 
})); 

モデルにネストされた属性を設定する機能を作るには、その複雑さをカプセル化するための良い方法です。

var Model = Backbone.Model.extend({ 

    setDeliveryCostRequire: function(value, options) { 
     // build a new object for 'orderCondition' 
     var newOrderCondition = _.extend({}, this.get('orderCondition'), { 
      deliveryCostRequire: value 
     }); 
     // replace 'orderCondition' with the new object. 
     this.set({ orderCondition: newOrderCondition }, options); 
     // optionally trigger a custom event for it. 
     this.trigger('change:deliveryCostRequire', this, value, options); 
     return this; 
    }, 
}); 

これは基本的な概念です。

Backbone.epoxyは、双方向結合ライブラリであり、上記と同じ結果を達成するモデルの計算フィールドも提供しますが、モデルの外部から完全に透過的であるという追加の利点があります。このモデルでは

var Model = Backbone.Model.extend({ 
    computeds: { 
     deliveryCostRequire: { 
      deps: ['orderCondition'], 
      get: function(orderCondition) { 
       return orderCondition && orderCondition.deliveryCostRequire; 
      }, 
      set: function(value) { 
       return { 
        orderCondition: _.extend({}, this.get('orderCondition'), { 
         deliveryCostRequire: value 
        }) 
       }; 
      }, 
     }, 
     deliveryCostAmount: { /* ...other computed... */ }, 
    } 
}); 

は、次の操作を行うことができます：

model.set('deliveryCostRequire', 'TOTAL_ORDER_AMOUNT'); 
model.get('deliveryCostRequire'); 
this.listenTo(model, 'change:deliveryCostRequire', this.render); 

私もa simple way to bubble up events of nested models and collectionsを作りました。

Answer 2

単にネストされたオブジェクトでBackboneが機能しないためです。たとえば、オブジェクトプロパティの属性をmodel.set()でsetにすることはできません。

お客様のthis.listenToは、オブジェクト全体の変更のみをリッスンしています。

ネストされたオブジェクトのサポートにはbackbone-deep-modelのようなライブラリを使用できます。