标签:backbone-views backbone-events javascript backbone-js
我有一个模型属性是一个对象:
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看不到嵌套对象的变化,但是在简单属性中看到它们?
解决方法:
使嵌套对象属性触发更改事件的一种简单方法是使用新对象替换整个对象.使用简单集合的最简单方法:
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.
标签:backbone-views,backbone-events,javascript,backbone-js 来源: https://codeday.me/bug/20190925/1816879.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。