如何在backbone.js中继承和添加child中的事件
How to inherit and add events in child in backbone.js
我已经尝试 this solustion 但无法正常工作。所以情况是 parent 没有定义任何事件。我无法对 parent 进行任何更改。我只能在 child 模块中进行更改,因此我需要有两个 child 模块都添加不同的事件,但两者相互独立。这意味着如果我安装 child 模块之一,它的事件应该起作用,如果两个都安装了,两个事件都应该起作用。
但似乎不起作用
Parent
module.PaymentScreenWidget = module.ScreenWidget.extend({
//it has no event defined
some code here....
https://github.com/odoo/odoo/blob/8.0/addons/point_of_sale/static/src/js/screens.js#L997
});
模块 1
function pos_discount_cards_widgets(instance, module){ //module is instance.point_of_sale
var QWeb = instance.web.qweb;
var _t = instance.web._t;
module.PaymentScreenWidgetDsicount = module.PaymentScreenWidget.extend({
events: function(){
return _.extend({},module.PaymentScreenWidget.prototype.events,{
"change .discount-card-select": "selectCard"
});
},
selectCard: function(e){
this.pos_widget.order_widget.update_summary();
this.pos_widget.payment_screen.update_payment_summary();
},
});
} //代码结束
模块 2
function pos_payment_with_decimal(instance, module){ //module is instance.point_of_sale
var QWeb = instance.web.qweb;
var _t = instance.web._t;
module.PaymentScreenWidgetDecimal = module.PaymentScreenWidget.extend({
events: function(){
return _.extend({},module.PaymentScreenWidget.prototype.events,{
'keyup': 'keyAction',
});
},
keyAction: function(e) {
var selected = $('.selected .paymentline-input').attr('value');
var re = /[,.]/g;
var str = selected.toString();
var subst = '';
var result = str.replace(re, subst);
this.$('.selected .paymentline-input').val((result * 0.01).toFixed(2));
},
});
} //代码结束
看起来你实际上在问两件事,一个是如何在子视图中继承事件,第二个是两个 sibling 视图如何同时激活它们的事件时间.
对于第一部分,当扩展事件的散列时,您想要访问您扩展的视图的原型。在您链接到的答案中,它被称为 ParentView 但那是因为那是正在扩展的视图的名称(但实际上并没有特殊的 "ParentView"属性).
因此,要从事件继承,您可以尝试类似的方法
module.PaymentScreenWidget = module.BasePaymentScreenWidget.extend({
events: _.extend({
"change .discount-card-select": "selectCard"
}, module.BasePaymentScreenWidget.prototype.events),
..rest of view
});
对于问题的第二部分,关于如何同时拥有 sibling views active 你只需要确保它们都引用相同的 el
,例如通过传递对它们的引用。
var $paymentForm = $('#paymentForm');
var discountModule = new module.PaymentScreenWidgetDsicount({el: $paymentForm});
var decimalModule = new module.PaymentScreenWidgetDecimal({el: $paymentForm});
我已经尝试 this solustion 但无法正常工作。所以情况是 parent 没有定义任何事件。我无法对 parent 进行任何更改。我只能在 child 模块中进行更改,因此我需要有两个 child 模块都添加不同的事件,但两者相互独立。这意味着如果我安装 child 模块之一,它的事件应该起作用,如果两个都安装了,两个事件都应该起作用。
但似乎不起作用
Parent
module.PaymentScreenWidget = module.ScreenWidget.extend({
//it has no event defined
some code here....
https://github.com/odoo/odoo/blob/8.0/addons/point_of_sale/static/src/js/screens.js#L997
});
模块 1
function pos_discount_cards_widgets(instance, module){ //module is instance.point_of_sale
var QWeb = instance.web.qweb;
var _t = instance.web._t;
module.PaymentScreenWidgetDsicount = module.PaymentScreenWidget.extend({
events: function(){
return _.extend({},module.PaymentScreenWidget.prototype.events,{
"change .discount-card-select": "selectCard"
});
},
selectCard: function(e){
this.pos_widget.order_widget.update_summary();
this.pos_widget.payment_screen.update_payment_summary();
},
});
} //代码结束
模块 2
function pos_payment_with_decimal(instance, module){ //module is instance.point_of_sale
var QWeb = instance.web.qweb;
var _t = instance.web._t;
module.PaymentScreenWidgetDecimal = module.PaymentScreenWidget.extend({
events: function(){
return _.extend({},module.PaymentScreenWidget.prototype.events,{
'keyup': 'keyAction',
});
},
keyAction: function(e) {
var selected = $('.selected .paymentline-input').attr('value');
var re = /[,.]/g;
var str = selected.toString();
var subst = '';
var result = str.replace(re, subst);
this.$('.selected .paymentline-input').val((result * 0.01).toFixed(2));
},
});
} //代码结束
看起来你实际上在问两件事,一个是如何在子视图中继承事件,第二个是两个 sibling 视图如何同时激活它们的事件时间.
对于第一部分,当扩展事件的散列时,您想要访问您扩展的视图的原型。在您链接到的答案中,它被称为 ParentView 但那是因为那是正在扩展的视图的名称(但实际上并没有特殊的 "ParentView"属性).
因此,要从事件继承,您可以尝试类似的方法
module.PaymentScreenWidget = module.BasePaymentScreenWidget.extend({
events: _.extend({
"change .discount-card-select": "selectCard"
}, module.BasePaymentScreenWidget.prototype.events),
..rest of view
});
对于问题的第二部分,关于如何同时拥有 sibling views active 你只需要确保它们都引用相同的 el
,例如通过传递对它们的引用。
var $paymentForm = $('#paymentForm');
var discountModule = new module.PaymentScreenWidgetDsicount({el: $paymentForm});
var decimalModule = new module.PaymentScreenWidgetDecimal({el: $paymentForm});