Ember.js does not auto bind model RESTful changes

Question

Correct me if I'm wrong, but I thought Ember should most of the model - view binding for you? What would be the case when you have to manually track model changes and update/refresh the view accordingly?

The app I'm working have nested routes and models associated with them.

App.Router.map(function() {
    this.resource('exams', {path: "/exams"}, function() {
        this.resource('exam', {path: ":exam_id"}, function(){
            this.resource('questions', {path: "/questions"}, function() {
                this.route("question", {path: ":question_id" });
                this.route("new");
            })
        })
    });
});

Everything works fine and I'm able to get exams and questions separately from the rest server.

For each model I have appropriate Ember.ArrayController and Ember.ObjectController to deal with list and single model items in the view. Basically for both models the way I handle things is IDENTICAL except for the fact that one is nested within the other. One more difference is that to display the nested route data I'm using another {{outlet}} - the one that is inside the first template.

Now the problem is that the top level model binding to the views is handled automatically by Ember without any special observers, bindings etc.. - e.g. When I add new item it is saved and the list view is refreshed to reflect the change or when the item is deleted it is auto removed from the view. "It just works (c)"

For second model (question), on the other hand, I'm able to reproduce all the crud behaviour and it works fine, but the UI is not updated automatically to reflect the changes.

For instance I had to something like this when adding new entry (the line in question has a comment):

App.QuestionsController = Ember.ArrayController.extend({
    needs: ['exam'],
    actions: {
        create: function () {
            var exam_id = this.get('controllers.exam.id')
            var title = this.get('newQuestion');
            if (!title.trim()) { return; }
            var item = this.store.createRecord('question', {
                title: title,
                exam_id: exam_id
            });
            item.save();
            this.set('newQuestion', '');
            this.get('content').pushObject(item); // <-- this somehow important to update the UI
        }
    }
});

Whereas it was handled for me for (exam model)

What am I doing wrong? How do I get Ember.js to track and bind model and change the UI for me?

Jérémie Horhant Jérémie Horhant · Accepted Answer · 2013-10-21T16:45:44

With

this.get('content').pushObject(item);

you push your new question to questions controller array. I think it would be better if you push the new question directly to the exam has_many relation.

exam = this.modelFor('exam');
exam.get('questions').pushObject(item);

Ember.js does not auto bind model RESTful changes

1 Answers