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

You have 2 errors in your code. The first is that all 3 modules have the same name, so they are effectively overwriting each other. The second is that in the events function, you are trying to extend ParentView, which doesn't exist. — mnickell, Jun 10 '15 at 13:16
@mnickell thanks, sorry I made mistake in copy paste, please have a look now I corrected code for ParentView. I still have a doubt they are in different directories written inside different methods, can they still overwrite each other? — StackUP, Jun 10 '15 at 13:51
You are still running into the problem with this line: 'module.PaymentScreenWidget = module.PaymentScreenWidget.extend({' you are trying to extend an instance of the same thing. You need to rename your new views in Module 1 and Module 2. — mnickell, Jun 10 '15 at 14:19
checked with new updated names in code, still doesn't work :( — StackUP, Jun 10 '15 at 14:24
is it must to write something about events in init() function? — StackUP, Jun 10 '15 at 14:27
Have you set the el property for each view? Without setting that, the view creates a div of its own to use as the el. The selectors used in the events object are all relative to that el property. Here is a jsfiddle to demonstrate. https://jsfiddle.net/bhhgttz5/ — mnickell, Jun 10 '15 at 14:51

Jack · Accepted Answer · 2015-06-10T19:15:53.897

2

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

edited Jun 10 '15 at 19:15

answered Jun 10 '15 at 13:16

Jack

10,943
13
50
65

thank you, sorry I made mistake while writing question, I have corrected them, can you please have a look again ? – StackUP Jun 10 '15 at 13:41
@StackUP I've updated my answer based on what I think your trying to do. – Jack Jun 10 '15 at 19:16
thank you, it was 'el' property which I was missing, rest I kept same and now both events are working together and separate :) – StackUP Jun 11 '15 at 02:15
Glad to help, if the answer answers your question you can mark it as accepted (by clicking the check mark to the left) so that future visitors can see that the question has an accepted answer. – Jack Jun 11 '15 at 13:24
did that however I can not confirm about "just need to make sure that they are both referencing the same el" because in my case they are referencing to different el may be because two events are on different element not on same and they are working well :) – StackUP Jun 11 '15 at 14:39
@StackUP Well same parent `el`. – Jack Jun 11 '15 at 14:39
@StackUP this is assuming that it's the same element (in this case text input) that is supposed to be triggering the events (that's at least what I understood from your question) – Jack Jun 11 '15 at 14:40
oh yeah may be not clear but they were different, thanks again for your help :) – StackUP Jun 11 '15 at 14:43
1

In that case I have a feeling I misunderstood your question, and the problem was even simpler in that your view's weren't referencing that element (or a parent element). It probably would have been easier to see that if there was some markup included, but at least the issue has been resolved. – Jack Jun 11 '15 at 14:43

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

1 Answers1