从嵌套模型属性中聆听更改 [英] Listen to changes from nested model attributes

问题描述

我有一个模型属性，它是一个对象：

I have a model attribute which is an object:

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

当我像这样使用 listenTo 时，不会调用 render 函数

When I use listenTo like this, the render function is not called

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

但是当我使用 listenTo 在其他属性上，它可以工作。

But when I use listenTo on other attributes, it works.

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

为什么 listenTo 不查看嵌套对象中的更改但是在简单属性中看到它们？

Why listenTo doesn't see changes in nested objects but see them in simple attributes?

推荐答案

使嵌套对象属性触发<$的简单方法c $ c>更改事件是用新的对象替换整个对象。使用简单设置的最直接方式：

A simple way to make the nested object attribute trigger a change event is to replace the whole object with the new one. The most straightforward way with a simple set:

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

创建一个在模型上设置嵌套属性的函数是封装这种复杂性的好方法。

Making a function to set nested attributes on the model is a good way to encapsulate that complexity.

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 是一个双向绑定库，它还为模型提供了与上述相同的计算字段，但是还有从模型外部完全透明的额外好处。

Backbone.epoxy is a two-way binding library which also offers computed fields for models which achieves the same as above, but with the additional benefit of being completely transparent from outside the model.

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... */ },
    }
});

使用此型号，您可以执行以下操作：

With this model, you could do the following:

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

我也做了一种简单的方法来冒泡嵌套模型和集合的事件。

这篇关于从嵌套模型属性中聆听更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！