rendering one item from a list in Ember

Question

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 }} 
      {{/link-to }}</li>
    {{/each}}

         </ul>
     </div>

  <div class="span4 offset4">
   {{ outlet}}
   </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?

Hyder Hyder · Accepted Answer · 2013-09-11T03:40:28

When you navigate to the restaurant route, the item will be the model to this route.

So in your template, if you try

  <script type="text/x-handlebars" id="restaurant">  
     this text is getting rendered  
  {{ model.name }}      
  </script>

You'll be able to see the name of the restaurant

And also the model hook is not called, and the further console.logs are not working,
because

Note: A route with a dynamic segment will only have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), then a model context is already provided and the hook is not executed. Routes without dynamic segments will always execute the model hook.

Hope everything will be clear now.

rendering one item from a list in Ember

1 Answers