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.

Answer 1

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.