从Ember的列表中渲染一个项目

时间:2013-09-11 00:33:45

标签: ember.js

在我的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.log都没有被调用。

在Ember首发视频https://www.youtube.com/watch?v=1QHrlFlaXdI中,当Tom Dale点击列表中的博客帖子时,帖子会显示在为其定义的模板中,而不需要他做任何事情而不是设置路线(因为我(以及)帖子模板中的{{outlet}}以接收帖子。

在这种情况下,你能理解为什么这对我不起作用吗?

1 个答案:

答案 0 :(得分:0)

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

因此,在您的模板中,如果您尝试

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

您将能够看到餐厅的名称

并且还没有调用模型钩子,并且进一步的console.log不起作用,
因为

  

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

希望现在一切都会清楚。