How to bind content with JSON in Ember.js

Question

All the examples are using fixed data source in the arraycontroller.content, while I am using dynamic data source which is generated from anther web service and returns a JSON, it won't create an object that I declared in Ember, here is the code sample:

        ET.AppYear = Ember.Object.extend({
            text:null,
            value:null
        });
        ET.EmailTypes = Ember.Object.extend();

        ET.appYearController = Ember.ArrayController.create({
            content: [],
            loadYears: function (year) {
                if (year != null) {
                    for (var i = -5; i < 5; i++) {
                        this.pushObject({ text: year + i, value: year + i });
                       //.AppYear.create({ text: year + i, value: year + i });
                    }
                }
            }
        });

        ET.selectedAppYearController = Ember.Object.create({
            selectedAppYear: '2011',
            alertChange: function(){
                alert("selected App Year is now " + this.get('selectedAppYear'));
            }.observes('selectedAppYear'),
            isChanged: function () {
                if (this.appYear != null) {
                    this.set('selection',this.get('content'));
                    //LoadETByAppYearETTypeID(this.selectedAppYear, ET.selectedEmailTypesController.emailType.email_template_type_id);
                }
            } .observes('selectedAppYear'),
            AppYear: function() {
                var ay = ET.appYearController.findProperty('text',this.get('selectedAppYear'));
                return ay;
            }.property('selectedAppYear')                
        });

As you can see, I will call ET.appYearController.loadYears(JSON) in an AJAX post back, which will create the content by using this.pushObject, but this is not the ET.AppYear object schema, while I call ET.selectedAppYearController.selectedAppYear, it returns an undefined object, and which really returns an object with {text:xx,value,xx} schema. That's why the selectionBinding also won't work in this case.

So what's the typical solution for this to import JSON elements as defined object and put into content?!

Answer 1

Take a look at the Ember-data library, it was made for your use-case and related use-cases:

https://github.com/emberjs/data

Answer 2

[2014-02-19: Deprecated - I no longer support ember-rest because it is overly simplistic, and would recommend using ember-data for most ember projects. Check out the Ember guides for an overview of ember-data as well as this example project ]

I've created a very simple library to handle working with REST interfaces from Ember: https://github.com/cerebris/ember-rest

I'm also writing a series of posts about using this library from Rails. The first is here: http://www.cerebris.com/blog/2012/01/24/beginning-ember-js-on-rails-part-1/

My next post, hopefully coming later today, deals precisely with loading data via AJAX into a collection of Ember objects. For now, you can see this behavior in the sample app as well as the ember-rest.js readme.

If you'd like to avoid using this lib, you might still want to check out the source. The deserialize() method on Ember.Resource is used to import JSON and could also be used with a generic Ember.Object.