ember.js - 这个 Ember.js 的引用是什么 guides setupController multiple models with arraycontroller

Question

目前，我正在浏览 Ember.js 指南中的每一页和代码片段，并构建一个小型示例应用程序。有些我已经坚持了一段时间但解决了。然而，这个让我感到困惑。

在 http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/它也在这里，但不使用 .get('songs") http://emberjs.com/guides/controllers/representing-a-single-model-with-objectcontroller/

App.SongsRoute = Ember.Route.extend({
  setupController: function(controller, playlist) {
    controller.set('model', playlist.get('songs'));
  }
});

我不知道 playlist.get('songs') 引用的是什么。我假设它是一个模型对象数组内部对象，但我显然错了。但是由于他们站点上的示例代码没有可供使用的模拟 stub 数据，所以我只是根据我的所有测试进行猜测。

此处提供的代码有一些注释掉的位以查看我正在测试的内容。

<script type="text/x-handlebars" data-template-name="songs">
    <h1>Playlist</h1>
    <ul>
      {{#each}}
        <li>{{name}} by {{artist}}</li>
      {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="playlist">
    <h3>Playlist: </h3>
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>


<script type="text/javascript">
window.App = Ember.Application.create();

App.Router.map(function () {
  this.resource('songs');
  this.resource('playlist');
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('songs');
  }
});

// App.SongsRoute = Ember.Route.extend({
//   setupController: function(controller, model) {
//     controller.set('model', model);
//   },
//   model: function () {
//     // return songs;
//     return playlist.songs;
//   }
// });

App.SongsRoute = Ember.Route.extend({

  playlist: function() {
    var playlist = { songs: [{fish: "fish"}, {fish: "fish"}] };
    return playlist;
  }.property(),

  setupController: function(controller, playlist) {
    controller.set('model', playlist.get('songs'));
  }
});

App.PlaylistRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('model', model);
  },
  model: function () {
    return playlist;
  }
});

App.SongsController = Ember.ArrayController.extend();

var songs = {
  duration: 777,
  name: 'Ember',
  artist: 'Jimmy Smith',
};

var playlist = {
  songs: [
    {
      id: 1,
      duration: 777,
      name: 'Ember',
      artist: 'Jimmy Smith',
    },
    {
      id: 2,
      duration: 888,
      name: 'jQuery',
      artist: 'Hyper Cat',
    }
  ]
};
</script>

Answer 1

不幸的是这个链接(http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/)有点困惑。他们假设存在模型关系，但没有表现出来。

他们假设有这样的事情:

App.Playlist = DS.Model.extend({
  name : DS.attr('string'),
  songs : DS.hasMany('song',{async:true})
});

App.Song = DS.Model.extend({
  name : DS.attr('string')
});

然后通常您要做的是从 setupController 中的 model 中提取集合，然后将其设置为 content 在主 Controller 需要的嵌套 Controller 上。

App.PlaylistRoute = Ember.Route.extend({
  setupController : function(controller,model){
    this._super(controller,model);
    this.controllerFor('songs').set('content',model.get('songs'));
  }
});

App.PlaylistController = Ember.ObjectController.extend({
  needs : ['songs']
});

然后，由于您正在为集合使用 ArrayController，如果您定义了 sortProperties 和 sortAscending 属性，那么您已经内置了排序。

App.SongsController = Ember.ArrayController.extend({
  sortProperties : ['name'],
  sortAscending : true
});

这是一个使用 FixtureAdapter 显示总体思路的 JSBin。

http://jsbin.com/ucanam/1073/edit