Ember.js / Ember Data - Render hasMany key/value pair in template - ember.js

Question

I have a Document model, which has attributes/properties defined to it using a hasMany relationship. The purpose is to freely be able to define content in different areas of the document like header, body, footer while also creating presentational attributes like color or image.
KF.Document = DS.Model.extend
title: DS.attr 'string'
documentAttributes: DS.hasMany 'documentAttribute'
KF.DocumentAttribute = DS.Model.extend
attrKey: DS.attr 'string'
attrValue: DS.attr 'string'
document: DS.belongsTo 'document'
Document.documentAttributes returns a DS.ManyArray so in order to render it I could do the following:
{{#each da in documentAttributes}}
<p>{{da.attrKey}} - {{da.attrValue}}</p> <!-- returns: "header - this is my header" -->
{{/each}}
The problem is that I want to access the keys directly (using a proxy?) so I can bind the data directly like so:
{{textarea value=documentAttributes.header cols="80" rows="6"}}
<img {{ bindAttr src="documentAttributes.imageSrc" }} >
{{textarea value=documentAttributes.footer cols="80" rows="6"}}
How should I approach this?

Answer 1

An approach could be to enhance an em view (for the brave maybe a component as well), or create a proxy, that receives a DocumentAttribute object and defines dynamically a property with name the value of the attrKey and return the value of the attrValue. You could achieve this with the following code ,
http://emberjs.jsbin.com/ehoxUVi/2/edit
js
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return createProxy(App.DocumentAttribute.create());
}
});
App.DocumentAttribute = Ember.Object.extend({
attrKey:"theKey",
attrValue:"theValue"
});
function createProxy(documentAttr){
App.DocumentAttributeProxy = Ember.ObjectProxy.extend({
createProp: function() {
_this = this;
var propName = this.get('attrKey');
if (!_this.get(propName)) {
return Ember.defineProperty(_this, propName, Ember.computed(function() {
return _this.get('attrValue');
}).property('attrKey'));
}
}.observes('content')
});
var proxy = App.DocumentAttributeProxy.create();
proxy.set('content',documentAttr);
return proxy;
}
HB
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{attrKey}}
<br/>
{{attrValue}}
<br/>
{{theKey}}
</script>

Answer 2

I couldn't get melc's solution to work with the DS.ManyArray returned by the relationship.
But his examples gave me some ideas and I did the following. Basically mapping the items through a "shortcut key" on the controller.
KF.DocumentsShowRoute = Ember.Route.extend
setupController: (controller, model) ->
controller.set('model', model)
# make an `Object` to store all the keys to avoid conflicts
controller.set('attrs', Ember.Object.create())
# loop through all `DocumentAttributes` in the `DS.ManyArray` returned by the relationship,
# get the `attrKey` from each item and make a shortcut to the item under `attrs` object
model.get('documentAttributes').forEach (item, index, enumerable) ->
key = item.get('attrKey')
controller.get('attrs').set(key, item)
The template, where header is the attrKey
{{input value=attrs.header.attrValue}}