javascript - Ember controller seems to create multiple instances in template and route? -

i have created small jsfiddle doesn't perform login right using ember 1.5 , handlebars 1.3. login controller holds property "islogin" set true. why afterwards none of other routes , templates takes notice of change?

    <script type="text/x-handlebars">     {{#if controllers.login.islogin}}     <div class="container">       <div class="navbar">         <div class="navbar-inner">           <a class="brand" href="#">ember digest</a>           <ul class="nav pull-right">             <li>{{#link-to 'articles'}}articles{{/link-to}}</li>             <li>{{#link-to 'photos'}}photos{{/link-to}}</li>             <li>{{#link-to 'login'}}login{{/link-to}}</li>           </ul>         </div>       </div>       {{outlet}}     </div>     {{/if}}     {{render 'login' controllers.login.content}} </script>    <script type="text/x-handlebars" data-template-name="articles">     <h2>articles</h2>   </script>     <script type="text/x-handlebars" data-template-name="login">     {{#if islogin}}       <p>you logged in!</p>     {{else}}       <form class="form-inline" {{action login on="submit"}}>         <h2>log in</h2>         {{input class="btn" type="submit" value="log in"}}       </form>       {{#if errormessage}}         <div class="alert alert-error">{{errormessage}}</div>       {{/if}}     {{/if}}   </script> 

and js

app = ember.application.create();  // routes app.router.map(function () {     this.route('articles');     this.route('photos');     this.route('login'); });  app.loginroute = ember.route.extend({     rendertemplate: function () {         this.render('login', {             into: 'application',             outlet: 'login'         });     } });  app.authenticatedroute = ember.route.extend({      beforemodel: function (transition) {         if (!this.controllerfor('login').get('islogin')) {             this.redirecttologin(transition);         }     },      redirecttologin: function (transition) {         alert('you must log in!');         var logincontroller = this.controllerfor('login');         logincontroller.set('errormessage', 'login first');         this.transitionto('login');     } });  app.applicationroute = ember.route.extend({     beforemodel: function (transition) {         if (!this.controllerfor('login').get('islogin')) {             this.transitionto('login');         }     } });  app.logincontroller = ember.controller.extend({     islogin: false,     errormessage: '',     actions: {         login: function () {             alert("login");             this.set('islogin', true);             this.transitiontoroute('articles');         }     } });  app.articlesroute = app.authenticatedroute.extend({     needs: 'login' });  app.applicationcontroller = ember.controller.extend({     needs : 'login' }); 

it's bit hard me test right now, think you're running issues because you're reaching down route hierarchy. part, ember controllers/routes allowed access properties of parent objects, not children objects. (which makes sense, because it's possible parent active not child.)

i think instead of having islogin property in logincontroller, put in applicationcontroller. then, in places need it, create alias:

app.applicationcontroller = em.objectcontroller.extend({     islogin: false });  app.logincontroller = em.objectcontroller.extend({     needs: ['application'],     islogin: em.computed.alias('controllers.application.islogin') }); 

this follows ember idioms more closely , think solve problem.