使用Ember.js在模板中顯示模型JSON數據

Question

這是一種很難在問題中使用短語，但希望我的JSON能幫助解釋。

var lodges = [ 
    { 
     id: 1, 
     lodgesName: 'Matt\'s Awesome Lodge', 
     lodgeOwnersName: 'Matthew D', 
     lodgeStreetAddress: '5555 J lane', 
     lodgeCity: 'Salt Lake city', 
     lodgeZip: '11111', 
     lodgeState: 'Utah', 
     favorites: [ 
      { 
       id: 1, 
       lodge_id: 2 
      } 
     ] 
    }, 
    { 
     id: 2, 
     lodgesName: 'Some Historic Lodge', 
     lodgeOwnersName: 'Santa Claus', 
     lodgeStreetAddress: '1 Clearwater Road', 
     lodgeCity: 'Grand Marais', 
     lodgeZip: '55555', 
     lodgeState: 'Minnesota', 
     favorites: [ 
      { 
       id: 1, 
       lodge_id: 1 
      } 
     ] 
    } 
]; 

這是我的模型，包含兩個旅館。我想使用favorites陣列中的lodge_id訪問每個小屋內的收藏夾，以獲取相關小屋ID的lodgesName。例如：每個小屋的主人都有一份他/她「最愛」的小屋列表。我想查看他們收藏的標題列表。在這個例子中，他們互相偏愛。

我的路線是：

App.Router.map(function() { 
    this.resource('lodges'); 
    this.resource('lodge', {path: '/lodge/:lodge_id'}, function() { 
    this.resource('favorites', function() { 
     this.route('new'); 
    }); 
    }); 
}); 

我試圖總結我周圍的一切使用灰燼如何交互的頭，但一直未能想出解決辦法。我需要在控制器中設置什麼才能使其工作？

Answer 1

使用路由model鉤設置連接到控制器的數據（假設小屋在App.lodges可用）：

App.LodgeRoute = Ember.Route.extend({ 
    model: function(params) { 
    var lodges = App.lodges; 
    return lodges.findProperty('id', params.lodge_id); 
    } 
}); 

App.FavoritesRoute = Ember.Route.extend({ 
    model: function() { 
    var lodges = App.lodges; 
    var lodge = this.modelFor('lodge'); 
    return lodge.favorites.map(function(favorite) { 
     return lodges.findProperty('id', favorite.lodge_id); 
    }); 
    } 
}); 

然後在您的收藏夾模板：

<script type="text/x-handlebars" data-template-name="favorites"> 
    <ul> 
    {{#each content}} 
     <li>{{lodgesName}}</li> 
    {{/each}} 
    </ul> 
</script>