Dynamically created Lists and rendering them properly

Often times we are trying to reduce the memory footprint of our app and one of the best ways is to destroy and create components. However also want to load data into some of those components via an ajax call.

What we end up with is a component (let's stick with a List) being rendered before the data has had a change to run through the setupItem(). Resulting in a blank screen.

What we did was to add an event call from the onResults handler inside the List which had made the ajax call. Then when the parent of the list catches that event call it will render() the newly createComponent List.

This doesn't always work because for large Lists setupItem() might still not have finished before the render bubble has fired. Resulting in an incomplete list.

What I thought of was to use a check in setupItem() to check to see if the index being set matches the total size of the data being parsed before bubbling up the render.

Are there more elegant ways of accomplishing that?


  • Could you just keep updating the length of the list as you receive more data so you don't have any setupItems calls for entries which aren't ready to render?
  • There's only one call to get data. So say 200 entries come back (first/last name so not talking a large data set). It's not a constant call back and forth to load more and more.

    What we're seeing is sometimes it gets through 100 or so of those setupItem's but because the Ajax onResult() has been fired and that bubbles the "renderNow" then the owner thinks it's time to newcomponent.render() and you're kind of stuck.

    I'll follow up with some more tests and a jsfiddle, but I think in the end I'll have to just check in the setupItem() and wait for the index to match the size and then bubble the renderNow event.
Sign In or Register to comment.