在 Ember 中渲染列表中的一项

Question

在我的 Ember 应用程序中，我使用从 Discourse 联合创始人的博客文章 http://eviltrout.com/2013/02/27/adding-to-discourse-part-1.html 复制的 ajax 调用获取了所有餐厅的列表

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;
      }
    );
   },

我设置了一个餐厅路由，它调用上面显示的 findAll 并将其呈现到应用程序模板中

App.RestaurantsRoute = Ember.Route.extend({
 model: function(params) {
    return(App.Restaurant.findAll(params));

  },

  renderTemplate: function() {

    this.render('restaurants', {into: 'application'});
  }

});

餐厅显示为restaurants 模板，如下所示，其中包含指向每个单独餐厅的链接。我还包含了restaurant 模板

<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>

在 Ember 路由器中，我有一个这样设置的父/子路由

 this.resource("restaurants", function(){
         this.resource("restaurant", { path: ':restaurant_id'});

     });

因此，我希望当我点击餐厅列表中特定餐厅的链接时，它会将此 restaurant 模板插入到 outlet 中定义的 restaurantS（复数）模板中

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

正在渲染此餐厅模板，但未显示 item 的数据。

当我点击列表中的{{#link-to 'restaurant' item}} 时，item 代表那家餐厅。

在此设置中，Ember 是否需要进行另一个 ajax 调用来检索该特定项目，即使它已经从 findAll 调用中加载？

如果我确实需要（再次）查询单个餐厅，我为单个餐厅创建了一条新路线

App.RestaurantRoute = Ember.Route.extend({
  model: function(params) {
    console.log(params);
    console.log('resto');
    return App.Restaurant.findItem(params);
  }

});

和餐厅模型上的 findItem

App.Restaurant.reopenClass({

findItem: function(){
    console.log('is this getting called? No...');
    return 'blah'
  }

但是这些 console.logs 都没有被调用。

在 Ember 入门视频 https://www.youtube.com/watch?v=1QHrlFlaXdI 中，当 Tom Dale 从列表中单击博客文章时，该文章会出现在为其定义的模板中，而他无需做任何其他事情，只需设置路线（就像我一样）和帖子模板中的 {{outlet}} 来接收帖子。

你能明白为什么在这种情况下同样对我不起作用吗？

Answer 1

当您导航到restaurant 路线时，item 将成为此路线的model。

所以在你的模板中，如果你尝试

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

您将能够看到餐厅的名称

而且模型钩子也没有被调用，进一步的console.logs 也不起作用，
因为

注意：具有动态段的路由只有在通过 URL 输入时才会调用其模型挂钩。如果路由是通过转换进入的（例如，当使用链接到 Handlebars 帮助器时），则已经提供了模型上下文并且不会执行钩子。没有动态段的路由将始终执行模型挂钩。

希望现在一切都清楚了。