How do I use a property path passed to an Ember Component? - ember.js

Question

I would like to do something like this
App.FooComponent = Ember.Component.extend({
tagName: 'ul',
propertyPath: '',
data: []
});
And in foo-component.hbs (this obviously doesn't work):
{{#each item in data}}
<li>{{propertyPath}}</li>
{{/each}}
I would use the component as follows:
{{foo-component data=content propertyPath='name'}}
where content is a collection of objects, each with a 'name' property.
I've tried to do it within the component by using a computed property and binding to that:
itemNames: function() {
var propertyPath = 'data.#each.' + this.get('propertyPath');
return this.get(propertyPath);
}.property(???)
But that has the problem of how to set the dependent key so the property is recomputed.

Answer 1

I would use something like this:
items: Ember.computed.map('data', function(dataObject) {
return {
name: dataObject.name,
otherProp: dataObject.otherProp
};
}).property('data.#each.{name, otherProp}')
You declare a computed property that maps the objects in data to some other objects. In your function, you can just return an object with the properties you need (I used name and otherProp). Then, to make sure that the property watches the name and otherProp properties on every object, I override the dependent keys with the .property() call. (By default, Ember.computed.map will call .property('data.#each') for you.)
Then, in your template:
{{#each items}}
<li>{{name}}</li>
{{/each}}
EDIT:
The dynamic property name is a little weird. One way you could do it is to declare a computed property on the class at creation time.
init: function() {
var propertyPath = this.get('propertyPath');
this.reopen({
propertyPathUpdater: function() {
this.notifyPropertyChange('data');
}.observes('data.#each.' + propertyPath)
});
}
Depending on how your values update, you might have to mess with it a little, but hopefully you get the idea. The idea being that Ember doesn't like dynamic properties. :)