StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Loading...</h2> <p>I'm a huge fan of eager loading. All my server calls are JSON responses, so it isn't a huge deal to make them more often than not. I usually refresh a collection every time it's needed by a view.</p> <p>My favorite way to eager load is by using <a href="https://github.com/PaulUithol/Backbone-relational/" rel="nofollow">Backbone-relational</a>. If I organize my app in a hierarchical manner. Consider this:</p> <pre><code>Organization model |--> Event model |--> News model |--> Comment model </code></pre> <p>So when a user is viewing an <code>organization</code> I can eager load that organization's <code>events</code> and <code>news</code>. And when a user is viewing a <code>news</code> article, I eager load that article's <code>comments</code>.</p> <p><a href="https://github.com/PaulUithol/Backbone-relational/" rel="nofollow">Backbone-relational</a> provides a great interface for querying related records from the server.</p> <h2>Too many things render themselves too much...</h2> <p><a href="https://github.com/PaulUithol/Backbone-relational/" rel="nofollow">Backbone-relational</a> helps here too! <a href="https://github.com/PaulUithol/Backbone-relational/" rel="nofollow">Backbone-relational</a> provides a global record store that proves to be very useful. This way, you can pass around IDs and retrieve the same model elsewhere. If you update it in one place, its available in another.</p> <p><code>a_model_instance = Model.findOrCreate({id: 1})</code></p> <p>Another tool here is <a href="https://github.com/theironcook/Backbone.ModelBinder" rel="nofollow">Backbone.ModelBinder</a>. <a href="https://github.com/theironcook/Backbone.ModelBinder" rel="nofollow">Backbone.ModelBinder</a> lets you build your templates and forget about attaching to view changes. So in your example of collecting information and showing it in the header, just tell <a href="https://github.com/theironcook/Backbone.ModelBinder" rel="nofollow">Backbone.ModelBinder</a> to watch BOTH of those elements, and on input <code>change</code>, your model will be updated and on model <code>change</code> you view will be updated, so now the header will be updated.</p> <h2>It's subviews all the way down... subviews become zombie-like or do not respond...</h2> <p>I really like <a href="https://github.com/derickbailey/backbone.marionette" rel="nofollow">Backbone.Marionette</a>. It handles a lot of the cleanup for you and adds an <code>onShow</code> callback that can be useful when temporarily removing views from the DOM.</p> <p>This also helps to facilitate attaching jQuery plugins. The onShow method is called after the view is rendered and added to the DOM so that jQuery plugin code can function properly.</p> <p>It also provides some cool view templates like <code>CollectionView</code> that does a great job of managing a collection and its subviews.</p> <h2>Flickering</h2> <p>Unfortunately I don't have much experience with this, but you could try pre-loading the images as well. Render them in a hidden view and then bring them forward.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload