1

I have a backbone.js/Chaplin app with the following flow:

  1. Collection view instantiated with a collection
  2. Collection is fetched from the server
  3. On sync of the collection render an "item view" for each model inside of the the collection view.

This could be a todo list with a load of todos in it. Let's imagine there are 1000 todos.

When all the todos are rendered I want to apply a jQuery effect to the collection view so I need to be sure that all the item views are completely rendered.

What is the best way to ensure that all of the items have been rendered inside the collection view before applying the jQuery effect?

I am currently waiting for the last view to render then calling the jQuery effect, however this does not work as it seems not the html has not been drawn on the page yet. It only works properly when I add a timeout.

Here is the code of the render function in an item view:

       render: function () {
            BaseView.prototype.render.apply(this, arguments);
            if (this.isLastItemView()) {
                setTimeout(function () {
                    Chaplin.mediator.publish('last_news_item_rendered');
                }, 1000);
            }
        }
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Rupert
  • 1,629
  • 11
  • 23

0 Answers0