Running an ember controller function when route loads to set property that controls a checkbox

Question

I have set up an ember checkbox: ``` {{view Ember.Checkbox checkedBinding='isChecked'}} ``` This checkbox is bound to this controller: ``` App.SettingsController = Ember.Controller.extend({ isChecked: false, isItChecked: function(){ var me = this; $.getJSON('ajax/checkIfUseLowRes.php', function(data){ //console.log(data); //me.isChecked = data; me.set('isChecked', data); //console.log(me.isChecked); }) }, sendSetting: function(){ var isChecked = this.isChecked; //this.set('isChecked', !isChecked); console.log(isChecked); $.post('ajax/setLowRes.php', {useLowRes: isChecked}); App.nameSpace.set('needsRefresh', true); }.observes('isChecked') }); ``` Essentially it is a checkbox which posts a setting, my problem is setting the original state of the checkbox. When I load the route, I want to have `isItChecked()` run to set the checkbox's original state. Example: 1. I go in to settings, click the checkbox 2. I leave the site and come back to the settings page Here is where I want the `isItCh…

Accepted Answer

One way to accomplish this is by using the route's setupController method.

```
App.SettingsRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    $.getJSON('ajax/checkIfUseLowRes.php', function(data){
      console.log('setting isChecked to: ', data);
      controller.set('isChecked', data);
    })
  }
})
```

This should get the job done with the fewest changes to your existing code but does have some drawbacks and is not exactly the-ember-way. Probably it would make more sense to have a model object that represents your settings, move ajax code to that model object and use the route's model hook to trigger as needed. See ember-without-ember-data for an example of how that can work.

Running an ember controller function when route loads to set property that controls a checkbox

Solution

Problem