Iterating over a model's attributes in EmberJS handlebars template

Question

Is there a way to iterate over a view\'s context\'s attributes in EmberJS? I am using Ember-Data (https://github.com/emberjs/data) for ORM.

Lets say I use connectOut

Answer 1

Ryan is right about the attributes, but it takes some doing to actually get where you're going. My examples here are using the latest RC1 Ember.

Here is an editor template that is model agnostic:

<script type="text/x-handlebars" data-template-name="edit_monster">
    {{#if clientId}}
    <h1>Edit Monster: {{name}}</h1>
    <div>
        {{#each metadata}}
            <span class="edit-label">{{name}}</span>
            <span class="edit-field">
                {{view App.AutoTextField typeBinding="type" nameBinding="name" }}
            </span>
        {{/each}}
    </div>
    {{else}}
    No monster selected.
    {{/if}}  
</script>

To make that work, we need a couple of pieces of magic-magic. This controller is a good start:

App.EditMonsterController = Em.ObjectController.extend({
    metadata: function() {
        var vals = [];
        var attributeMap = this.get('content.constructor.attributes');
        attributeMap.forEach(function(name, value) {
             vals.push(value);   
        });
        return vals;
    }.property('content')

});

That uses that "attributes" property that Ryan mentioned to provide the metadata that we are feeding into our #each up there in the template!

Now, here is a view that we can use to provide the text input. There's an outer container view that is needed to feed the valueBinding in to the actual textfield.

App.AutoTextField = Ember.ContainerView.extend({
    type: null,
    name: null,

    init: function() {
        this._super();
        this.createChildView();
    },
    createChildView: function() {
         this.set('currentView', Ember.TextField.create({
                    valueBinding: 'controller.' + this.get('name'),
                    type: this.get('type')
                }));   
    }.observes('name', 'type')
});

Here is a fiddle demonstrating the whole crazy thing: http://jsfiddle.net/Malkyne/m4bu6/

Answer 2

The Ember Data objects that represent your models have an attributes property that contains all of the attributes for the given model. This is what Ember Data's toJSON uses to convert your models into Javascript objects.

You can use this attributes property to read a models attributes and then pull those specific attributes out of an instance. Here is an example.

http://jsfiddle.net/BdUyU/1/

Just to reiterate what's going on here. We are reading the attributes from App.User and then pulling the values out of App.ryan and App.steve. Hope this makes sense.