Listen to changes from nested model attributes

我有这是一个对象的模型属性：

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

当我使用listenTo这样的render功能不叫

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

但是当我使用listenTo于其他属性，它的工作原理。

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

为什么listenTo没有看到在嵌套对象的变化，但看到他们在简单的属性？

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);

我还做了一个简单的方法来嵌套模型和收藏冒泡事件。

Answer 2:

很简单，因为骨干不带嵌套的对象。例如，你不能set通过对象属性的属性model.set()

你this.listenTo只是听整个对象的改变，而不是它的属性。

您可以尝试使用库，例如骨干深模型嵌套对象的支持。