Question

在我的Ember应用程序中，我创建了一个具有颜色属性的模型

   App.Gecko = DS.Model.extend({
       color: fusia

    })

在模板中，我想根据Gecko的颜色运行不同的组件，因此模板中所需的逻辑就像这样

 {{#each item in model}}
       {{if item.color == green}}
             code for a component
       {{/if}}
       {{if item.color == blue}}
            code for some other component
       {{/if}}
 {{/each}}

除了Handlebars不支持{{if item.color == green}}逻辑。我知道我应该为此使用计算属性，但我无法弄清楚如何设置它以便根据项目的颜色运行不同的组件。问题：我如何在我的控制器上使用计算属性（我假设它属于控制器）根据模型中的属性运行不同的组件？

更新在回答第一个答案时，我尝试按照提交https://github.com/lukemelia/ember.js/commit/16b70236e0904cc76335c34fae8ef2c035b0657b中显示的模式使用新的（从1.11开始）组件助手。这就是我所谓的方式

{{#each item in model}}
    {{ component renderGeckoComponent model=item }}

{{/each}}

在我的控制器中，我有这个

   renderGeckoComponent: function(){
    var col = this.get('model.color');
     console.log("even though there are many instances, this only runs once and ")
    if (color === "fusia"){
      console.log("going to have a component here")
    }else if (color === "pink"){
      console.log("going to have a component here")
   }
   }.property('model.color')

结果：当我尝试启用该属性时，它会显示undefined

var col = this.get('model.color');  //col is undefined
console.log(col) //undefined

Answer 1

关于支持val1 == val2，有一个插件：ember-truth-helpers

要使用计算属性动态创建组件，可以使用{{component}} helper。

根据模型的属性使用不同的组件

1 个答案: