javascript - Dynamically output the expression within each loop in handlebar emberjs -

suppose have following controller

app.somecontroller = ember.controller.extend({   container: ember.a(['one','two','three']),   attrone: 'attribute one',   attrtwo: 'attribute two',   attrthree: 'attribute three' }); 

in handlebars, can loop each of value in container array, how can dynamically populate each attr within each loop

{{#each data in container}}   {{data}} // one, two, 3   {{???}} // {{attrone}} {{attrtwo}} {{attrthree}} ??? how ??? {{/each}} 

handlebars cannot computations, , {{#each}} can loop on single array @ time. therefore, elements in array eaching on must contain data want output. can take approach of defining computed property data need, call loopdata. problem connection between keys in array , corresponding attribute string name of property, prefix key. so:

// in controller loopdata: function() {   return this.get('container') .        // take container ,     map(function(key) {                 // create array each key       var attr = this.get('attr' +      // gets property name starting 'attr'         key.capitalize();               // , ending in key       return { key: key, attr: attr };  // , returns little object key , attr   }); }.property('container.@each') 

this create array looks

[{ key: 'one', attr: 'attribute one' }, ...] 

which can loop on in template:

{{#each data in loopdata}}     {{data.key}} // one, two, 3     {{data.attribute}} {{/each}}     

however, work , not way structure data. you're better off defining basic properties directly

container: [     { key: 'one', attr: 'attribute one' },     { key: 'two', attr: 'attribute two' },     { key: 'three', attr: 'attribute three' }, ] 

and loop directly on container without having create intermediate data representation.