StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POEmberJS {{#linkTo}} a model that isn't loaded yet
text
Body
copied!<p>I am working on my first significant Ember.js app, and have been running into some roadblocks. After hitting one-too-many show-stopping bugs with ember-data, I have decided to roll my own models using Ember.Object (for now at least - ember-data looks like it will be real awesome, real soon).</p> <p>My basic model structure is:</p> <ul> <li>Album (has photo album-specific attrs, and references a collection of images)</li> <li>Images (an ArrayProxy collection of Image models, which tracks collection-level attrs like 'currentImage', and 'nextImage')</li> <li>Image</li> </ul> <p>I have a <code>{{#linkTo}</code>} helper in my template that is supposed to allow the user to click to the next image in the set, like so:</p> <pre><code><button> {{#linkTo image controllers.images.nextImage}} Next Image {{/linkTo}} </button> </code></pre> <p>This template has the context of the <code>AlbumController</code>, which <code>needs: ["images"]</code>. <code>controllers.images.nextImage</code> is a computed property, that figures out ID of the currently-displayed image, then uses it to find the <code>Image</code> model for the next model in the <code>Images</code> ArrayProxy collection.</p> <p><strong>My problem is this:</strong></p> <p>Upon page load, I receive an error message <code>Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object.</code></p> <p>I'm assuming this is because the <code>{{#linkTo}}</code> helper is trying to get the <code>id</code> property from the return of <code>controllers.image.nextImage</code>, which is a computed property that relies on the <code>Images</code> collection being loaded from the server. This async behaviour is being handled with promises behind-the-scenes, but the <code>{{#linkTo}}</code> helper seems to required a valid context to be returned <em>immediately upon page load</em>.</p> <p><strong>My questions are these:</strong></p> <ul> <li>Has anybody else had to handle this kind of situation, where they're not using ember-data and had to use <code>{{#linkTo}}</code> helpers with computed properties that weren't immediately available?</li> <li>Can anyone suggest workarounds that don't fight Ember's way of doing things?</li> </ul> <p>Some of my thoughts are:</p> <ul> <li>make the computed property return a dummy context, that <em>somehow</em> gets replaced with a valid model after load</li> <li>use an <code>{{#action}}</code> helper instead of <code>{{#linkTo}}</code></li> </ul> <p>I have <a href="http://jsbin.com/apuvic/2/edit" rel="nofollow">written up a JSBin example</a> which is mostly code-complete, except I couldn't manipulate the hash URL to trigger the nested routes, so I had to do everything in the application template.</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