CODEWITHSUNDEEP
javascriptjquerybackbone.js
user1813867
user1813867

Reputation: 1055

Backbone View calling another View - Now can't catch click events

I thought I read you could have one view call another view like this:

View 1

window.View1 = Backbone.View.extend({

    initialize: function () {
        this.render();
    },

    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        "click .start" : "start"
    },

     start: function () {
       var StartView = new View2({model: this.model});
    }
})

View 2

window.View2 = Backbone.View.extend({

    initialize: function () {
        this.render();
    },

    events: {
        "click .nextstage"   : "nextstage"
    },

    nextstage: function () {
     alert('NEXT STAGE COMING UP');
    },

    render: function () {
        $("#content").html(this.template(this.model.toJSON()));
        return this;
    }
});

So the router sets me up with view one and I click on "start" and it takes me to view 2. Then I want to click on Next Stage and have the View 2 Method trigger based on the click.... but it won't fire. Any ideas why?

Upvotes: 0

Views: 221

Answers (1)

zaquest
zaquest

Reputation: 2050

View2 renders to #content and according to your code #content is not an element (el) for the view. Since events property waits for events that happen inside of view's el it won't work.

Try

// View 1
start: function () {
    var StartView = new View2({model: this.model, el: $('#content')});
}

...

// View 2
render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}

Upvotes: 1

Related Questions