StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POEmber.js - Getting routes and models working together
text
Body
copied!<p>i'm learning Ember.js but i'm struggling to figure out why my routes aren't working properly.</p> <p>Here are the relevant parts of my app.js:</p> <pre><code>// Routes App.Router.map(function() { this.resource('posts', { path: '/posts' }); this.resource('post', { path: '/post/:id' }); }); // Handle route for posts list App.PostsRoute = Ember.Route.extend({ model: function() { return App.Post.findAll(); } }); // Handle route for single post App.PostRoute = Ember.Route.extend({ model: function(params){ return App.Post.findById(params.id); } }); // Post model App.Post = Ember.Object.extend(); App.Post.reopenClass({ findAll: function(){ var posts = []; $.getJSON("/api/posts").then(function(response){ response.posts.forEach(function(post){ posts.pushObject(App.Post.create(post)); }); }); return posts; }, findById: function(id){ $.getJSON("/api/post/" + id).then(function(response){ return App.Post.create(response.post); }); } }); </code></pre> <p>Then in my template I have this:</p> <pre><code> <script type="text/x-handlebars" data-template-name="posts"> <div class="large-12 columns"> <h1>Posts</h1> <hr> <ul> {{#each post in model}} <li>{{#linkTo 'post' post}}{{post.title}}{{/linkTo}}</li> {{/each}} </ul> </div> </script>  <script type="text/x-handlebars" data-template-name="post"> <div class="large-12 columns"> <h1>{{title}}</h1> <div class="content"> {{post_content}} </div> </div> </script> </code></pre> <p>I'm having a few issues here. Firstly, the href attribute on the links in the post list are coming out like this:</p> <p><code>#/post/<App.Post:ember217></code></p> <p>I can fix this by changing my post route to:</p> <pre><code>this.resource('post', { path: '/post/:post_id' }); </code></pre> <p>But then when I try to navigate directly to a post by using a URL like <code>/#/post/1</code> I get an error: <code>Assertion failed: Cannot call get with 'id' on an undefined object.</code></p> <p>Finally, if I leave my post route how it is (<code>/post/:id</code>) then visit the URL <code>/#/post/1</code> none of the post data is displayed. I can see the correct API endpoint is called and no errors are shown in the console. </p> <p>However, if i click through to the single post from the posts list the post is displayed properly but it uses the weird URL that I mentioned earlier - <code>#/post/<App.Post:ember217></code>.</p> <p>If this helps, this is the JSON the post models are created from:</p> <pre><code>{"post": { "id":2, "title":"Second post", "alias":"second-post", "postedOn":"2013-08-12 09:11:37", "authorId":1, "post_content":"Post content" } } </code></pre> <p>Sorry i know there's quite a bit there - I hope it's enough to give a clear picture of what I'm doing wrong.</p> <p>Thank you</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