StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Edit: This answer is inspired by what I learned from a sample "<em>Brunch with Chaplin</em>" example <a href="https://github.com/paulmillr/brunch-with-chaplin/tree/master/app" rel="nofollow">here</a>. <a href="http://chaplinjs.org/" rel="nofollow">Chaplin</a> is a framwork built on top of backbone.</p> <hr> <p>Ok, so I'm going to suggest a coffeescript based solution (I just happen to have a solution in coffee :/ ! Try using <a href="http://js2coffee.org/" rel="nofollow">js2coffee</a> if you want to convert back to js)</p> <h2>The Master Class</h2> <p>The idea is to have a master class - not view - that will hold the app in it's hand, instead of the master view.</p> <pre><code>module.exports = class Application initialize: (finished_init) => @collection = new Collection() @main_view = new View() @collection.fetch( success: (collection) => @main_view.collection = @collection finished_init() ) render: (targetLocation, params) -> switch targetLocation when "main" then ( @main_view.render() ) </code></pre> <p>In the <code>initialize</code> method, we fetch the collection data. On success, the <code>finshed_init()</code> is called. You can replace it with <code>@render</code> (Btw, <code>@</code> == this :) )</p> <h2>Initialization</h2> <p>Here's how I'd initialize my app:</p> <pre><code>$ -> app = new Application() app.initialize( -> #----------------------------------# # Create the router and its routes # This is called at the finished_init() of the Application class #----------------------------------# app_router = new Router ) </code></pre> <h2>Running More than one <code>fetche</code> Asynchronously</h2> <p>You could have a function that monitors fetche's completion, <strong>or</strong> you could try using <a href="https://github.com/caolan/async" rel="nofollow">async</a>. It has a nice <code>`parallel</code> function that does just that.</p> <pre><code>@collection1 = new Collection() @collection = new Collection() @main_view1 = new View() @main_view2 = new View() async.parallel [ (callback) -> setTimeout (-> @collection1.fetch( success: (collection) => @main_view1.collection = @collection callback null, "one" ), 200 , (callback) -> setTimeout (-> @collection2.fetch( success: (collection) => @main_view2.collection = @collection callback null, "two" ), 100 ], (err, results) -> if not err @render() # Render what you want </code></pre>

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