ember.js - 基于内容的Ember选择 View Controller

Question

我目前有一个 View 设置，根据模型渲染模板:

<ul>
  {{#each controller.sortedAll}}
    {{view App.ScoreView}}
  {{/each}}
</ul>

。

App.ScoreView = Ember.View.extend({
  templateName: function(){
    var item = this.get('context')
    if (item.sort < 8){
        return 'low'
    } else {
      return 'high'
    }
  }.property(),
})

我正在努力为每个单独的 View 分配一个特定的 Controller 。 jsbin是: http://jsbin.com/tahag/5/edit

是否可以使用 App.ScoreView在 controller:中指定 Controller ？还是我最好尝试设置项目 Controller :

{{view App.ScoreView itemController="VAL"}}

并从父 Controller 传递 VAL作为属性？

Answer 1

Controller 是从当前作用域继承的(在 View 上定义itemController不会做任何事情)。您应该对每个对象执行此操作。

{{#each controller.sortedAll itemController='val'}}
    {{view App.ScoreView}}
{{/each}}

然后在 View 中，您可以执行 this.get('controller')...
如果您希望每个项目都具有不同类型的 Controller ，也可以执行if语句和 {{render 'high' this}}。

{{#each controller.sortedAll}}
   {{#if isBlue}}
      {{render 'blue' this}}
   {{/if}}
   {{#if isGreen}}
      {{render 'green' this}}
   {{/if}}

{{/each}} 

个人建议:

为了避免使模板过于复杂，我只使用一个 Controller 。

 {{#each controller.sortedAll itemController='score'}}
   {{input value=sort}}
   {{view App.ScoreView}}
 {{/each}}

添加计算属性所依赖的内容，以使其自动更新:

App.ScoreView = Ember.View.extend({
  templateName: function(){
    var sort = this.get('controller.sort');
    if (sort < 8){
      return 'low';
    } else {
      return 'high';
    }
  }.property('controller.sort'),
});

利用 computed帮助器

App.ScoreController = Ember.ObjectController.extend({
  isVeryHigh: Em.computed.gt('sort', 20),
  isVeryLow: Em.computed.lt('sort', 4)
});

示例: http://jsbin.com/sidebozi/1/edit