ember.js - 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 connectOutlets to register a UserView with a user that has attributes such as email, name, etc. In the connected Handlebars template, is there anyway that I can iterate over those attributes?

I basically need to build a generic view that can be reused with different models...

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/