Observation in a hidden controller

application.route.js

import Route from 'ember-route';

export default Route.extend({
  activate() {
    document.body.classList.add('standard');
  }
});

application.template.hbs

<header class="container-fluid">
  <h1>Ember Sandbox</h1>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

bar.controller.js

import Controller from 'ember-controller';
import inject from 'ember-service/inject';
import { reads } from 'ember-computed';
import get from 'ember-metal/get';

export default Controller.extend({
  shared: inject(),
  
  newValue: reads('shared.baz'),
  
  actions: {
    changeSharedBaz() {
      get(this, 'shared').setBaz(get(this, 'newValue'))
    }
  }
});

bar.template.hbs

{{link-to "返回 Index" "index"}}

<p>
	{{input value=newValue}}
	<button type="button" onclick={{action "changeSharedBaz"}}>改变 Baz</button>
</p>

foo.controller.js

import Controller from 'ember-controller';
import inject from 'ember-service/inject';
import observer from 'ember-metal/observer';
import get from 'ember-metal/get';

export default Controller.extend({
  shared: inject(),
  
  bazChanged: observer('shared.baz', function() {
    alert(get(this, 'shared.baz'))
  })
});

foo.template.hbs

{{link-to "返回 Index" "index"}}

<p>
	{{shared.baz}}
</p>

index.controller.js

import Controller from 'ember-controller';
import get from 'ember-metal/get';
import set from 'ember-metal/set';

export default Controller.extend({
  
});

index.route.js

import Route from 'ember-route';

export default Route.extend({
  
});

index.template.hbs

<p>
	首先激活 <code>FooController</code>
	{{link-to "Go Foo" "foo"}}
</p>

<p>
	然后进入 <code>BarController</code>
	{{link-to "Go Bar" "bar"}}
</p>

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('foo')
  this.route('bar')
});

export default Router;

services.shared.js

import Service from 'ember-service';
import get from 'ember-metal/get';
import set from 'ember-metal/set';

export default Service.extend({
  baz: '',
  
  getBaz() {
    return get(this, 'baz')
  },
  
  setBaz(value) {
    set(this, 'baz', value)
  }
});

styles.app.css

*, *::before, &::after {
  box-sizing: border-box;
}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {},
    "EXTEND_PROTOTYPES": true
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js",
    "hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/standard.css",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-composable-helpers": "*",
    "ember-route-action-helper": "*",
    "ember-truth-helpers": "*"
  }
}