javascript - ember 模板不会因属性变量更改而更新

Question

我尝试将类属性绑定(bind)到 Controller 创建的变量，但是当变量更改时，模板不会相应更新。

这是我的模板片段:

<div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li {{bind-attr class="loggedIn:show:hide :dropdown" }}>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg"></i></a>
                <ul class="dropdown-menu">
                    <li>{{#link-to 'profile'}}Profile{{/link-to}}</li>
                    <li><a href="#">Log out</a></li>
                </ul>
            </li>

该变量已登录，如果 true 显示此列表，否则隐藏它。该模板称为 Auth

这是我的身份验证 Controller :

App.AuthController =  Ember.Controller.extend({
    loggedIn: false,
    actions: {
        activateProfile: function(state){
            console.log(state);
            this.set('loggedIn', true);
        }
    }
});

我有一个用于登录的 Controller ，它将触发 Auth 中的 activateProfile 操作，从而更改变量并显示 <li>但不知怎的，它并没有按预期工作。

这是我的登录 Controller 。

App.SigninController = Ember.Controller.extend({
    needs:"Auth",
    actions: {
        userQuery: function() {
                //this will be replace with call to the server
                this.get('controllers.Auth').send('activateProfile', true);
        }
    }
});

路线:

  this.resource('auth',function(){
      this.resource('profile');
      this.resource('signin');
      this.resource('signup');
  });

我尝试登录控制台和 ember 属性，loggedIn 变量确实发生了变化，但是 <li>是没有出现。我做得够不够，如果您有更好的建议请教我。

谢谢

Answer 1

我正在回答我自己的问题，以防万一有人遇到同样的问题。我没有使用 Auth 资源，而是将逻辑移至 IndexController，并在 IndexController 中声明loggedIn。我注意到的一件事是，如果您使用 Controller A 更改/操作 Controller B 的变量，您可能能够修改其内容，但 Controller B 的模板不知道并正确更新。

为了解决这个问题，您必须使用观察者或计算作为别名。正如我提到的，我将变量移至 IndexController，因为整个应用程序而不仅仅是 Auth 模块应该知道用户状态，这更有意义。

这是我修复它的方法。

App.IndexController = Ember.Controller.extend({
    loggedIn: false,
    actions:{
        loggedOut : function(){
            this.set('loggedIn', false);
            this.transitionToRoute('Index');
        }
    }
});

App.SigninController = Ember.Controller.extend({
    needs: ['Index'],
    isLoggingIn : Ember.computed.alias("controllers.Index.loggedIn"),
    actions: {
        userQuery: function() {
            this.set('isLoggingIn',true)
}
});

当然，我将 Auth 模板移至 Index，但不需要更改名称，这就是我需要做的。

希望对你有帮助!