Ember: Как привязки работают в шаблоне приложения?

Question

У меня есть логическая переменная focusBool, которая скрывает меню веб-приложения при True. Шаблон приложения с {{#if}} заявление ниже:

<script type="text/x-handlebars"> 

    {{#if focusBool}} 
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 

      {{#link-to 'home' tagName="li"}} 
       {{#link-to 'home'}} 
       Home 
       {{/link-to}} 
      {{/link-to}} 

      {{#link-to 'books' tagName="li"}} 
       {{#link-to 'books'}} 
       Books 
       {{/link-to}} 
      {{/link-to}} 

      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav 
    {{/if}} 

    <div class='container-fluid'> 
    {{outlet}} 
    </div> 

</script> 

Эта переменная была введена для всех маршрутов, контроллеров и компонентов. Когда focusBool изменен на true после загрузки приложения, пункты меню не исчезают. Как можно переопределить шаблон приложения при изменении focusBool? Мое понимание заключается в том, что {{#if focusBool}} будет отслеживать при изменении значения focusBool и отображать или скрывать меню соответственно?

Вот еще родственный код:

App.Session = Ember.Object.extend({ 
    user: null, 
    focusBool: false, 
    userID: '', 
}); 

Injection:

Ember.Application.initializer({ 
    name: 'login', 
    initialize: function (container, application) { 

    App.register('session:main', App.Session.create(), { instantiate: false, singleton: true }); 
    // Add `session` object to route to check user 
    App.inject('route', 'session', 'session:main'); 
    // Add `session` object to controller to visualize in templates 
    App.inject('controller', 'session', 'session:main'); 
    // Add `session` object to session to visualize in templates 
    App.inject('component', 'session', 'session:main'); 

    } 
}); 

Применение Маршрут:

App.ApplicationRoute = Ember.Route.extend({ 

    isAutheticated: null, 

    actions: { 
    login: function() { 
     //var session = this.get('session.'); 
     var isAuth = false; 
     var store = this.store; 
     var user = null; 
     var _this = this; 
     var firebase = new Firebase("https://dynamicslife.firebaseio.com"); 
     firebase.authWithOAuthPopup('facebook', function(error, authData) { 
     if (error) { 
      isAutheticated = false; 
      console.log('failled login attempt', error); 
     } else if (authData) { 
      isAutheticated = true; 
      console.log('user authenticated with Firebase', authData.uid); 
      var record = store.find('user', authData.uid).then(function(_user) { 
      console.log('user exist in Firebase'); 
      _this.session.set('userID', authData.uid); 
      //_this.rerender(); 
      }, function(error) { 
      // user does not exist or some other error 
      store.unloadAll('user'); 
      user = store.createRecord('user', { 
       id: authData.uid, 
       uid: authData.uid, 
       displayName: authData.facebook.displayName, 
      }); 
      user.save(); 
      _this.session.set('userID', authData.uid) 
      _this.rerender(); 
      console.log('New user created in Firebase'); 
      }); 
     } 
     }); 
    }, 

    logout: function() { 
     var firebase = new Firebase("https://dynamicslife.firebaseio.com"); 
     firebase.unauth(); 
     isAuth = false; 
     this.session.set('userID', ''); 
     console.log('logged out'); 
    } 
    } 
}); 

Answer 1

На первый взгляд кажется ваш ссылки focusBool неправильно в шаблоне. Поскольку вы вводите объект session, вы должны ссылаться на него как session.focusBool в шаблоне.

Here is a working demo.