Tuesday, 10 September 2013

rendering one item from a list in Ember

rendering one item from a list in Ember

In my Ember app, I get a list of all the restaurants using an ajax call
copied from Discourse co-founder's blog post
http://eviltrout.com/2013/02/27/adding-to-discourse-part-1.html
App.Restaurant.reopenClass({
findAll: function() {
return $.getJSON("restaurants").then(
function(response) {
var links = Em.A();
response.restaurants.map(function (attrs) {
links.pushObject(App.Restaurant.create(attrs));
});
return links;
}
);
},
I have a Restaurants route set up which calls the findAll shown above and
renders it into the application template
App.RestaurantsRoute = Ember.Route.extend({
model: function(params) {
return(App.Restaurant.findAll(params));
},
renderTemplate: function() {
this.render('restaurants', {into: 'application'});
}
});
The restaurants are displayed as a restaurants template like this with a
link to each individual restaurant. I've also included the restaurant
template
<script type="text/x-handlebars" id="restaurants">
<div class='span4'>
{{#each item in model}}
<li> {{#link-to 'restaurant' item}}
{{ item.name }}
</li>
{{/each}}
</ul>
</div>
<div class="span4 offset4">

</div>
</script>
In the Ember router, I have a parent/child route set up like this
this.resource("restaurants", function(){
this.resource("restaurant", { path: ':restaurant_id'});
});
Therefore, I'm hoping that when I click on the link to a particular
restaurant in the restaurants list, it'll insert this restaurant template
into the outlet defined in the restaurantS (plural) template
<script type="text/x-handlebars" id="restaurant">
this text is getting rendered
{{ item }} //item nor item.name are getting rendered
</script>
This restaurant template is getting rendered, however, the data for the
item is not getting displayed.
When I click {{#link-to 'restaurant' item}} in the list, item represents
that restaurant.
In this setup, does Ember need to make another ajax call to retrieve that
particular item, even though it's already been loaded from the findAll
call?
In the event that I do need to query for the individual restaurant (again)
I created a new route for the individual restaurant
App.RestaurantRoute = Ember.Route.extend({
model: function(params) {
console.log(params);
console.log('resto');
return App.Restaurant.findItem(params);
}
});
and a findItem on the Restaurant model
App.Restaurant.reopenClass({
findItem: function(){
console.log('is this getting called? No...');
return 'blah'
}
but none of those console.logs are getting called.
In the Ember starter video https://www.youtube.com/watch?v=1QHrlFlaXdI,
when Tom Dale clicks on a blog post from the list, the post appears in the
template defined for it without him having to do anything more than set up
the routes (as I did) and the {{outlet}} within the posts template to
receive the post.
Can you see why the same is not working for me in this situation?

No comments:

Post a Comment