How to inherit and add events in child in backbone.js

Question

I have tried this solustion but couldn't get it working. So situation is there a parent which doesn't have any event defined. I can not make any change in parent. I can make changes only in child modules so I need to have two child modules both adding a different event but both are independent of each other. It means If I install one of child modules its event should work, If both are installed both events should work.

but doesn't seem to work

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

});

Module 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();
        },


});

} //end of code

Module 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));
        },


});

} //end of code

Answer 1

It looks like your actually asking two things, one how to inherit events in a child view, and the second how two sibling views can have both their events active at the same time.

For the first part when extending the event's hash you want to access the prototype of the view your extending from. In the answer you linked to it was called ParentView but that's because that was the name of the view that was being extended (but there isn't really a special "ParentView" property).

So to inherit from events you can try something like

module.PaymentScreenWidget = module.BasePaymentScreenWidget.extend({

    events: _.extend({
            "change .discount-card-select": "selectCard"
    }, module.BasePaymentScreenWidget.prototype.events),

   ..rest of view
});

For the second part of your question as to how to have both sibling views active at the same time you just need to make sure that they are both referencing the same el for example by passing in the reference to both of them.

var $paymentForm = $('#paymentForm');
var discountModule = new module.PaymentScreenWidgetDsicount({el: $paymentForm});
var decimalModule = new module.PaymentScreenWidgetDecimal({el: $paymentForm});