Requerying model data in Ember.js route

Question

Is there a way to do realtime data with Ember.js?

What I'm looking for is the ability to inject updated and new records (not delete) into previously returned results.

So let's say I have routers that looks like this that enables sorting and paging (aka skip):

App.Router.map(function() {
    this.resource('messages', { path: '/messages/skip/:skip/sort/:sort/direction/:direction' });
});

App.MessagesRoute = Ember.Route.extend({

    model: function(params) {
        this.set('params', params);
        return this.query();
    },

    query: function() {
        var sort = {};
        sort[this.get('params').sort] = parseInt(this.get('params').direction);

        return App.Message.find({}, {
            skip: this.get('params').skip,
            sort: sort
        });
    },

    setupController: function(controller, model) {
        var self = this;
        this._super(controller, model);

        Ember.Instrumentation.subscribe('onMessage', {
            before: function(name, timestamp, message) {
                self.controller.set('content', self.query());
            },
            after: function() {}
        });
    },

});

This works great - it sorts and skips correctly in a static sense.

(NOTE: I'm NOT using Ember Data - just a set of Ember Objects.)

However, messages arrive continuously and I'd like the display of these messages to automatically requery the new message when they arrive.

I have a websocket that tells me when that happens and that is working correctly and I'm using the Ember.Instrumentation infrastructure to route that event to the setupController closure I have . But when I do a

this.controller.set('content', this.query());

in reaction to this event to reload, the content all vanishes. What am I doing wrong?

Answer 1

i think one way is to execute App.Message.find() periodically - ember will handle the updates of your views

window.setInterval(function(){App.Message.find()},1000);

correct me if i am wrong - i am still learning ember

Answer 2

I finally figured this out, although I'd love an ember expert to tell me why.

If I use promises and then() to get the real result and then set that on the controller, it works:

setupController: function(controller, model) {
    var self = this;
    this._super(controller, model);
    Ember.Instrumentation.subscribe('onMessage', {
        before: function(name, timestamp, message) {
            var p = self.query();

            p.then(function(response) {
                self.controller.set('content', response);
            });
        },
        after: function() {}
    });
},

I'd love to understand why - because I thought Ember could take a promise in addition to an actual value. That said, this solution is actually nicer because there is no flashing while the REST call roundtrips - the data is only swapped when that is completed.