StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The Collection constructor <a href="https://github.com/documentcloud/backbone/blob/master/backbone.js#L597" rel="nofollow noreferrer">looks like this</a>:</p> <pre><code>var Collection = Backbone.Collection = function(models, options) { //... this._reset(); this.initialize.apply(this, arguments); //... this.reset(models, {silent: true, parse: options.parse}); //... }; </code></pre> <p>Step by step:</p> <ol> <li>The <a href="https://github.com/documentcloud/backbone/blob/master/backbone.js#L896" rel="nofollow noreferrer"><code>this._reset()</code></a> call does a <code>this.length = 0</code>.</li> <li>The <code>this.initialize.apply(...)</code> is the call to your <code>initialize</code> method.</li> <li>The <a href="https://github.com/documentcloud/backbone/blob/master/backbone.js#L741" rel="nofollow noreferrer"><code>this.reset(...)</code></a> will call <a href="https://github.com/documentcloud/backbone/blob/master/backbone.js#L633" rel="nofollow noreferrer"><code>add</code></a> to add the models. The <code>add</code> call will update the collection's <code>models</code> and <code>length</code> properties.</li> </ol> <p>So, when <code>initialize</code> is called, you'll have <code>this.length == 0</code> and <code>this.models</code> will be an empty array since only <code>_reset</code> will have been called here. Now we can easily see why <code>this.each</code> doesn't do anything and why <code>console.log(this.length)</code> says <code>0</code>.</p> <p>But why does <code>console.log(this)</code> tell us that we have a populated collection? Well, <code>console.log</code> doesn't happen right away, it just grabs references to its arguments and logs something to the console a little bit later; by the time <code>console.log</code> gets around to putting something in the console, you'll have gotten through <strong>(3)</strong> above and that means that you'll have the <code>this.models</code> and <code>this.length</code> that you're expecting to see. If you say</p> <pre><code>console.log(this.toJSON()); </code></pre> <p>or:</p> <pre><code>console.log(_(this.models).clone()) </code></pre> <p>you'll see the state of things when <code>console.log</code> is called rather than the state of things when <code>console.log</code> writes to the console.</p> <p>The documentation isn't exactly explicit about what is supposed to be ready when <code>initialize</code> is called so you're stuck tracing through the source. This isn't ideal but at least the Backbone source is clean and straight forward.</p> <p>You'll notice that <code>initialize</code> is called like this:</p> <pre><code>this.initialize.apply(this, arguments); </code></pre> <p>The <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" rel="nofollow noreferrer"><code>arguments</code></a> in there means that <code>initialize</code> will receive the same arguments as the constructor so you could look in there if you wanted:</p> <pre><code>initialize: function(models, options) { // The raw model data will be in `models` so do what // needs to be done. } </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