在Ember.js中使用itemController时，我可以拥有自定义视图吗？

Question

在Ember.js中执行{{#each array itemController="something"}}时，有没有办法获得自定义视图？目前，Ember检查员显示Ember正在使用“虚拟”视图。

例如，以下Handlebars不会发生任何警报：

<ul>
  {{#each model}}
      <li>
        {{name}}
        <ul>
          {{#each kids itemController="kid"}}
            <li>{{name}}? {{yelledName}}!</li>
          {{/each}}
        </ul>
      </li>
  {{/each}}
</ul>

以下JavaScript：

App.KidController = Ember.ObjectController.extend({
  yelledName: Ember.computed('name', function() {
    return this.get('name').toString().toUpperCase();
  })
});

App.KidView = Ember.View.extend({
  // THIS NEVER HAPPENS!
  test: Ember.on('didInsertElement', function() {
    alert('didInsertElement on ThingView');
  })
});

这是一个使用该代码（而不是）工作的代码：http://cdpn.io/hveEA

似乎Ember 不试图按名称查找View，就好像它是来自路径控制器的视图一样。相反，它只是呈现“虚拟”视图，如下面的屏幕截图所示。

Answer 1

每当你转换到带有kid_id的路线时都会使用kidView，类似这样/ kids /：kid_id，这就是使用KidView的时候。除非您在每个循环中指定视图，否则您无法实现的目标：

{{#each kids itemController="kid"}}
  {{view App.KidView kid=this}}
{{/each}}

并在视图的模板中访问'kid'并显示您想要的任何内容。

Answer 2

使用它有什么问题（允许你使用KidView）：

{{#each kid in kids}}
{{render 'kid' kid}}
{{/each}}

我没有看到你使用任何模型属性。

模板：

<script type="text/x-handlebars" data-template-name="kid">
    <li>{{name}}? {{yelledName}}!</li>
</script>

查看：

App.KidView = Ember.View.extend({
  // THIS HAPPENS!
  test: Ember.on('didInsertElement', function() {
    alert('didInsertElement on ThingView');
  })
});

完整代码示例： https://gist.github.com/anonymous/8971543