Ember：绑定在应用程序模板中是如何工作的？

Question

我有一个布尔变量 focusBool，它在 True 时隐藏 Web 应用程序的菜单。带有 {{#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: '',
});

注入：

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.

Ember：绑定在应用程序模板中是如何工作的？

Ember: How do bindings work in the application template?

ember.js