StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've faced this very issue and there are patterns that can help. Backbone gives you tools but doesn't tell you how to use them. It's very important to establish good patterns as you work with it. There are two different patterns I have used that help with this.</p> <p>1) Depending on how your application works, it can be easy or hard to make sure you always call an <code>attached()</code> method or trigger an <code>attached</code> event on a view after you have rendered it and attached it to the DOM. In my case, it was easy because I created an architecture where I could handle that in one central place.</p> <p>2) If you always attach your element to the DOM immediately following rendering - specifically any time after you render without deferring attaching by doing so inside an asynchronous callback, then within your render() function you can defer the call to <code>layout()</code> or whatever needs to run after being attached. Like so:</p> <pre><code>var MyList = Backbone.View.extend({ render: function() { /* rendering logic goes here */ // Notice that the timeout is 0 - you can actually not even pass this argument // but I wanted to emphasize that there is no delay given. setTimeout(this.layout, 0); return this; }, layout: function() { // This code won't be run until after this.el is attached to the DOM } }); var view = new MyList().render(); $('#dummy').append(view.$el); </code></pre> <p>Javascript is and always will be single threaded. I/O can be done asynchronously, but anything that actually requires time from the JS engine cannot run in parallel with other JS code. When you call <code>setTimeout()</code> without the last argument or with a value of <code>0</code> it will essentially queue it up to run as soon as possible after the code that is currently executing has finished.</p> <p>You can take advantage of this fact if you follow a pattern of always attaching to the DOM soon after calling <code>render()</code> - any time before the currently executing code finishes running and returns control back to the JS engine to run whatever is queued up next. By the time the function queued up by <code>setTimeout(func, 0)</code> is run, you then can know that your view has been attached to the DOM. Note that this is the same thing as what <a href="http://documentcloud.github.io/underscore/#defer"><code>_.defer()</code></a> does, but I wanted to explain it for you.</p> <p>Once again, patterns are very important to establish. If you are never consistent and don't establish patterns within your application, you don't have any guarantees and you lose the ability to count on this mechanism - and others you might otherwise be able to establish. Hope this helps!</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