ember.js - Use different components depending on a property of a model -

in ember app created 1 model color property

   app.gecko = ds.model.extend({        color: fusia      }) 

in templates, want run different components depending on color of gecko, desired logic in templates this

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

except handlebars doesn't support {{ if item.color == green }} logic. understand i'm supposed use computed properties this, can't figure out how set different components run depending on color of item. question: how use computed property on controller (i'm assuming belongs in controller) run different components depending on property in model?

update in response first answer, tried use new (as of 1.11) component helper following pattern shown in commit https://github.com/lukemelia/ember.js/commit/16b70236e0904cc76335c34fae8ef2c035b0657b how called it

{{#each item in model}}     {{ component rendergeckocomponent model=item }}  {{/each}} 

in controller, had this

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

result: when try property switch on, says undefined

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

in regards supporting val1 == val2 there addon: ember-truth-helpers

to use computed property dynamically create component, there {{component}} helper.