Read object properties in handlebars template

Question

Is there a some way to read object properties using handlebars or ember helpers?

{{#each object in objects}}
  <tr>
    {{#each key in keys}}
      {{!- doesn't work, because object[key] isn't valid syntax I guess --}}
      <td>{{object[key]}}</td> 
    {{/each}}
  </tr>
{{/each}}

I know that I can read properties like so {{object.someProperty}}, however in my case the list of properties which needs to be read is passed to a component as an argument (in my example it is called keys).

Maybe this function already exists in handlebars or ember and I just didn't find it yet?

Answer 1

That syntax doesn't work for Ember's Handlebars. Because of optimization and Ember wanting to add array observers to the item being iterated it won't work. What you can do is add a computed property that returns an array of the items in the object though. You do need to be careful though, the computed property won't update as values change.

http://emberjs.jsbin.com/AmetIRi/1/edit

iterableObject: function(){
  return $.map(this.get('model'), function(value, key) {
    return [key + '-' + value];
  });
}.property('model')