When working with Ember, the traditional syntax for looking up array values by key is to use the .[] syntax. For example:
{{myArray.[0]}}
However, I have encountered an issue when trying to perform a lookup on an associative array. Even though I have a separate model/controller property listing the keys, I am always getting undefined as the value.
Here is a simple controller as an example:
App.IndexRoute = Ember.Route.extend({
model: function () {
var ret = [];
ret['notGreat'] = ['Plain Yogurt', 'Clams'];
ret['great'] = ['Pizza', 'Chicken'];
return Ember.RSVP.hash({
keys: ['great', 'notGreat'],
array: ret
});
}
});
In my template, I am using:
{{#each key in model.keys}}
<li>{{key}}</li>
{{#each subItem in model.array.[key]}}
<li>Subitem: {{subItem}}</li>
Unfortunately, model.array.[key] always returns undefined. Is there a specific method for performing associative array lookups in Ember? I am open to creating a controller function like getFoodsWithKey(key), but so far, I haven't found any resources indicating that calling a controller function (as opposed to a computed property) with parameters is possible.
Explore JSFiddle (array notation): http://jsfiddle.net/6Evrq/786/
Visit JSFiddle (object property notation): http://jsfiddle.net/6Evrq/787/