Ember.js / Ember Data-在模板中呈现hasMany键/值对

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}}