使用 Ember.js 在模板中显示模型 JSON 数据答案

【问题标题】：Display model JSON data in template using Ember.js使用 Ember.js 在模板中显示模型 JSON 数据
【发布时间】：2013-09-30 21:46:06
【问题描述】：

这在问题中有点难以表达，但希望我的 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');
    });
  });
});

我试图弄清楚一切是如何使用 Ember 进行交互的，但一直无法弄清楚这一点。我需要在控制器中进行什么设置才能使其正常工作？

【问题讨论】：

标签： javascript json ember.js

【解决方案1】：

使用 Routes 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>

【讨论】：