New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.one.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    increment() {
    	let foo = this.get('foo');
      foo++;
      this.set('foo', foo);
    }
  },
  foo: 1,
  //I am a computed property, I compute something based on foo value
  twoTimesFoo: Ember.computed('foo', function () {
    //This alert will appear when this function executes
  	alert ('Hi John!');
    return foo*2;
  })
});

controllers.three.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    increment() {
    	let foo = this.get('foo');
      foo++;
      this.set('foo', foo);
    }
  },
  foo: 1,
  //I am a computed property, I compute something based on foo value
  twoTimesFoo: Ember.computed('foo', function () {
    //This alert will appear when this function executes
    return this.get('foo')*2;
  }),
  fourTimesFoo: Ember.computed('twoTimesFoo', function () {
    //This alert will appear when this function executes
  	alert ('Hi John!');
    return this.get('twoTimesFoo')*2;
  })
});

controllers.two.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    increment() {
    	let foo = this.get('foo');
      foo++;
      this.set('foo', foo);
    }
  },
  foo: 1,
  //I am a computed property, I compute something based on foo value
  twoTimesFoo: Ember.computed('foo', function () {
    //This alert will appear when this function executes
  	alert ('Hi John!');
    return this.get('foo')*2;
  })
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
      this.route('one');
    this.route('two');
      this.route('three');
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.one.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.three.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.two.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<h1>CP mini tutorial</h1>
{{outlet}}

<nav style="margin-top: 20px">
<ul>
<li>{{#link-to 'one'}}One{{/link-to}}</li>
<li>{{#link-to 'two'}}Two{{/link-to}}</li>
<li>{{#link-to 'three'}}Three{{/link-to}}</li>
</ul>
</nav>

templates.index.hbs

Use links to navigate to routes, and open each controller to see how is working

templates.one.hbs

<h2>One</h2>
Foo value is: {{foo}}
<br> 
<br> 
When you click on this button, the computed property callback should execute right? Try it!
<br>
<br> 
<button onclick={{action "increment"}}>Increment value of foo</button>
<br>
(after clicking the button, navigate to route two)

templates.three.hbs

<h2>Two</h2>
Foo value is: {{foo}}
<br>
fourTimesFoo value is: {{fourTimesFoo}}
<br> 
<br> 
Now in this example, we have a chained computed property. fourTimesFoo depends on twoTimesFoo, and twoTimesFoo depends on foo, when you change foo, fourTimesFoo change. The computed properties are chained. 
<br>
<br> 
<button onclick={{action "increment"}}>Increment value of foo</button>

templates.two.hbs

<h2>Two</h2>
Foo value is: {{foo}}
<br>
twoTimesFoo value is: {{twoTimesFoo}}
<br> 
<br> 
As you can see in the past example callback never executed, the reason is because the computed property is never <i>consumed</i>, but in this example, the computed property is consumed, that's why you saw the alert when you navigated to this route. As you can see, every time foo value changes, the computed property executes, this is on demand, and this is how is designed in ember.
<br>
<br> 
<button onclick={{action "increment"}}>Increment value of foo</button>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}