Update Ember model live via action

1
votes

I'm new to Ember.js and keep struggling on a simple task. My goal is to achieve live update of the page content after action is triggered. I'm quite lost in Ember logics regarding route-controller-model relationship in this case.

So my template.hbs is something like:

<h1>{{model.somedata}}</h1>
<button {{action 'getContent'}}>Get Content</button>

My controller accepts some params from user form and makes the AJAX call:

export default Ember.Controller.extend({
    somedata: 'hello',
    actions: {
        getContent: function () {
            var self = this;

            Ember.$.ajax({

                // ... standart call with some query data

                success: function(result) {
                    self.set('somedata', result);
                } 
            });
        }
    }
});

My route model returns only controller params, so if I get it right as controller properties get updated, there must be a simple step to update the current model and display all changes to the template. 

export default Ember.Route.extend({
    model: function(params) {
        return params;
    }
});

Can you guys give me a tip how this process is regularly built in Ember?

3
ajaxember.js
Are you looking for "this.controller.set('somedata', result)"? – stijn.aerts
Yeah, it seems like this, but in this case model will not be updated – markoffden
Try "this.currentModel.set('somedata', result)" – stijn.aerts
So far I've used an overkill setting controller properties as call result, so I can access them lively in the template, but I'm confused as I do not retrieve my template data from model, but from controller directly. This ember logics makes me confused more and more – markoffden
You are looking for self.set('model.somedata'). – user663031

3 Answers

1
votes

You are looking for self.set('model.somedata', results).

Your code as it stands is setting the somedata property on the controller, which doesn't affect anything.

1
votes

Yeah it's a bit confusing, here's how I think of it...

First Ember sets up the route.

The route has multiple hooks that are used to get and process the model (i.e. beforeModel, model, afterModel). Ember will always look for these as part of it's opinionated nature.

There is also a setupController hook that will fire after all the model hooks. As part of the setupController hook, the controller will be created and the model will be passed to the controller.

Once that happens, I've found it helpful to think of the model as no longer being part of the route, but the controller instead.

0
votes

Controllers will be deprecated. So IMO do not use controllers.

Handle that action in your route. If you bind value to the object returned by model hook, your data and page will be updated when you update the value.

export default Ember.Route.extend({
    somedata: null,
    model: function(params) {
        return { 
           params: params,
           somedata: this.get('somedata')
        };
    },
    actions: {
        getContent: function () {
            ...
            var _this = this;
            ...
            success: function(result) {
                _this.set('somedata', result);
            } 
        }
    }
});