Ember with XML based data and a rest like API

6

@jasonmit @tarasm Thanks for the advice so far. It seems i got things a little confused. I am using Route to load my data like follows

App.EpisodesRoute = Ember.Route.extend({
    model: function () {
        var url = server + '/library/metadata/1955/children';
        return Ember.$.get(url).then(function (xml) {
            var json = $.xml2json(xml);
            //console.log(JSON.stringify(json));
            return json.Video;
        });
    },
    setupController: function(controller, model) {
        controller.set('model', model);
        //console.log(JSON.stringify(model));
    },
    
});

and

App.EpisodeRoute = Ember.Route.extend({
    model: function (params) {
        //console.log(params.ratingKey);
        var url = server + '/library/metadata/' + params.ratingKey;
        return Ember.$.get(url).then(function (xml) {
            var json = $.xml2json(xml);
            //console.log(JSON.stringify(json));
            return json.Video;
        });
    },
    setupController: function (controller, model) {
        controller.set('model', model);
        //console.log(JSON.stringify(model));
    },
});

but this does not seem to be ideal because when the controller is initalised it does not seem to have data so the following seems to fail. @jasonmit this is me trying to implement your solution from the keyboard controlled list navigation sample.

this.objectAt(0).set('active', true);

Fails in the controller below and i think it has to do with me loading the model aysnc.

App.EpisodesController = Ember.ArrayController.extend({
    sortProperties: ['title'],
    sortAscending: true, // false for descending
    actions:
        {
            changeSelection: function (params) {
                var toBeSelected;

                if (params && params.hasOwnProperty('id')) {
                    // click event handled differently from keyDown event on view
                    var idx = this.get('content').indexOf(params);
                    toBeSelected = this.objectAt(idx);
                }
                else {
                    // this came from the keyDown event on the view
                    var current = this.get('currentSelected'),
                        currentIndex = this.indexOf(current);

                    toBeSelected = this.objectAt(currentIndex + params.direction);
                }

                if (toBeSelected) {
                    this.setEach('active', false);
                    toBeSelected.set('active', true);
                }
            }
        },
    init: function () {
        this._super();

        // by default, setting the first userController as active
        var fn = function () {
            this.objectAt(0).set('active', true);
            this.removeObserver('content', this, fn);
        };

        this.addObserver('content', this, fn);
    },

    currentSelected: function () {
        var i = this.findBy('active', true) || -1;
        return i;
    }.property('@each.active')
});

— EDIT— forgot to say the error i get is

Uncaught TypeError: Object #<Object> has no method 'set'

— end edit – That said maybe i am just doing something else that is stupid. I am normally a back-end developer not a web developer so this has been a bit of a learning curve.