ember.js switch view context from javascript

Question

For a speed problem we have with our ember code I'm trying to find a way to switch context on a view.

A sample of what we have: {{collection tagName="tbody" contentBinding="App.Controller.allTickets" itemViewClass="App.View.TicketList"}}

App.View.TicketList has as template Ticket-List App.Controller.allTickets is an ArrayController.

The problem is that every item in the content array of App.Controller.allTickets is a ticket object (which template Ticket-List displays). The ticket object has computed properties which are displayed in the Ticket-List template. We have many Ticket objects (> 1000) in the content array and just creating them, pushing them in the content array while the template is visible in the browser is taking a lot of time (> 2 minutes).

What I'm trying to do is create a system where the first 10 Ticket Objects in App.Controller.allTickets are 'real' Ticket Objects while the rest are dummy objects (Objects like the Ticket Object but with only default values and no computed properties). Then I'm thinking about a function that will watch the scroll event on the ticket-list and when a ticket (displayed with the Ticket-List template) is scrolled into the visible part of the div, that is a dummy ticket then change the context of the Ticket-List template to the right Ticket Object and then rerender that view.

In short, how do I change the context on a view/template from javascript?

Answer 1

I think what you want to do is create a property on your controller for visible tickets that is bound to the content and some input property on the view that triggers the display of additional tickets. This property would initially have only the first ten ticket objects and your view would display this instead of the full ticket list content. When the user scrolls, add the subsequent ten tickets to the visible tickets property of the controller and the view will update.

Answer 2

You might want to have a look at this... infinite scroll with ember.js (lazy loading)
The logic behind this could help you build what you are looking for