Ember Observes not listened when inside actions handlers

Question

I have a method which observes a page number value in an global object.

When I update the page number the observed value calls a method to send an action to server.

Here when I put the observes outside the actions handler its working fine, but when I move the observes method inside the actions handler then it is not triggered when the value changes.

Also when I put the observes outside the actions handler it throws an warning that actions handlers outside the actions is deprecated.

How can I listen to the observes when I put the method inside actions handlers.

Template:

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "updatePage"}}>Update Page Number</button>
</script>

app.js:

App.globalval = Ember.Object.create({
    page: 1
});

App.IndexRoute = Ember.Route.extend({
  globalValChange: function(){
     this.send('someFunction');
  }.observes('App.globalval.page'),
  actions:{ 
    someFunction: function(){
      console.log("in function to send request to server");
    },
    updatePage: function(){
      App.globalval.set('page', 5); 
    }                                           
  } 
});

JSBIN Link

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-26T19:23:46

The actions hash is reserved for actions that are sent to a controller/route, so the answer is you can't, and shouldn't.

Computed properties/observers/functions should live in the extended object itself.

Ember Observes not listened when inside actions handlers

1 Answers