Ember.js 如何创建一个我可以索引的数组

Question

我在索引数组时遇到问题。通过环顾四周，我发现了一些如何通过视图在控制器中索引项目的示例http://jsfiddle.net/WSwna/14/

我的应用程序从 REST 调用中获取数据，如下所示

Videos.Store = DS.Store.extend({
revision: 12,
url: "http://localhost/",
adapter: Videos.Adapter
})

我的路由器如下

Videos.Router.map(function(){
this.resource('videos', {path: '/'});
this.route('forms');
})

Videos.VideosRoute = Ember.Route.extend({
    model: function(){
        return Videos.Video.find();
    }
});

当我将 HTML 实现为

{{#each controller}}
.....
{{/each}}

我的数据显示。

但是我想从链接http://jsfiddle.net/WSwna/14/ 实现示例 但是我在生成 Videos.VideosController 并将其传递给 {{#each 迭代器}}

时遇到问题

我的 Videos.VideosController 看起来像这样

    Videos.VideosController = Ember.ArrayController.extend({
    model: function(){
        return Videos.Video.find();
    }
});


Videos.VideoView = Ember.View.extend({
    content: null,
    adjustedIndex: function(){
        return this.getPath('_parentView.contentIndex') + 1;
    }.property()
});

但是当我在 HTML 中按如下方式使用它时：

{{#each Videos.VideosController }}

我收到一条错误消息，告诉我内容必须实现 Ember.Array。你通过了 Videos.VideosController。据我了解，Ember 提供了一个要迭代的默认数组集合，但现在我希望扩展这个控制器，我很难创建一个数据数组以传递给视图。我也不清楚 View 代码是如何连接到这个扩展控制器的。

任何有助于澄清这一点的想法将不胜感激。

Answer 1

但是我想从链接http://jsfiddle.net/WSwna/14/ 实现示例但是我在生成 Videos.VideosController 并将其传递给 {{#each 迭代器}}时遇到问题

虽然这不是推荐的方式，但要实现您对VideosController 的尝试，您应该创建一个实例而不是扩展。这看起来像这样：

Videos.videosController = Ember.ArrayController.create({
  content: [{ name: 'Goodfellas' }, { name: 'The Aviator' }, { name: 'The Departed' }]
});

然后你可以像这样使用它来迭代：

{{#each Videos.videosController}}
  ...
{{/each}}

这里需要注意两点，我们不是扩展ArrayController，而是直接创建它的一个实例，并且我们还使用小写videosController 来指出它是一个实例。

还有一点值得一提的是，controller 不像 route 那样有 model 钩子。

希望对你有帮助。

编辑

在您发表最后一条评论后，我意识到您真正想做什么，所以我整理了一个小型 jsbin，展示了如何使用模型中的数据来提供您的 Videos.videosController 的内容，看看 @987654322 @。

但基本上你要做的就是钩入你的route的afterModel钩子，并将已经检索到的模型传递给你的Videos.videosController的内容：

Videos.videosController = Ember.ArrayController.create({
  content: []
});

Videos.VideosRoute = Ember.Route.extend({
  model: function(){
    return Videos.Video.find();
  },
  afterModel: function(model) {
    Videos.videoController.set('content', model);
  }
});