如何在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});