Search code examples
javascriptbackbone.jsbackbone-layout-manager

backbone layout manager after render


I am using Backbone and Layout Manager. I have this code inside MyView.js:

afterRender: function() {
    var scope = this;
    this.model.get("books").each(function(bookModel) {
            var bookView = new BookView({
                model: bookModel
            });
            scope.insertView(".books", bookView).render();
    });
},

Inside BookView.js I have afterRender method:

afterRender: function() {
    console.log("after render");
},

I have 6 items in the books property of the model and I call render() for each book. Eventually what I get is "after render" logged only once. What is wrong? Where are the missing 5 "after render" logs??


Solution

  • The code above was invoking inside MyView's afterRender method. For unknown reasons many calls to render() one by one don't invoke each book's afterRender().
    After reading again and again in the LayoutManager documentation I realized that I need to call insertView() inside the beforeRender() method without rendering the views. This way render() will render all the sub-views and afterRender() will invoked properly:

    beforeRender: function() {
        var scope = this;
        this.model.get("books").each(function(bookModel) {
                var bookView = new BookView({
                    model: bookModel
                });
                scope.insertView(".books", bookView);
        });
    },