this.model in View has multiple models

Question

I am seeing some weird behaviour in my Backbone view. When i console.log "this.model" i get different results in my render method and in one of my custom methods.

This is how i have my route set up:

app_router.on('route:showTemplates', function(id) {
                var listtemplate = new ListTemplateModel.Model({
                    id: id
                });
                listtemplate.fetch().then(function() {
                    var detailsview = new ListDetailsView.View({
                        model: listtemplate
                    });
                });
            });

If I console.log in the render method of my view, i get what i expect:

define(['use!backbone', 'helpers/templateHelper'], function(B, TemplateHelper) {
    var View = B.View.extend({
        el: '#page',
        template: TemplateHelper('taskDetailTemplate'),
        events: {
            'keypress #new-step': 'addOnEnter'
        },
        initialize: function() {
            this.render();
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
        },
        addOnEnter: function(e) {
             this.input = this.$('#new-step');

            if (e.which !== 13) {// || !this.input.val().trim()) {
                return;
            }
            console.log(this.model.toJSON());           
        }
    });

    return {
        View: View
    };
});

But the console.log in my "addOnEnter" method returns an array of all the model instances that were created over a session. Its like the event gets fired for all the previously created models too.

enter image description here

Are you saying that there are two addOnEnter calls when you're only expecting one? Perhaps you have zombies because you're re-using a DOM element for your views but you never remove the event delegator. In general, el: '#page' is a bad idea, the caller should put the el inside #page and then call remove on it when done. — mu is too short

mithun_daa mithun_daa · Accepted Answer · 2012-12-31T17:12:01

This was being caused because the event was getting fired multiple times for all the elements in the collection like it is mentioned here. It just manifested itself in a different way.

this.model in View has multiple models

1 Answers