ember 模板不更新属性变量更改答案

【问题标题】：ember template not update on property variable changeember 模板不更新属性变量更改
【发布时间】：2014-09-22 10:27:43
【问题描述】：

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

这是我的模板的 sn-p：

<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>

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

这是我的 Auth 控制器：

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

我有一个用于登录的控制器，它将触发 Auth 中的 activateProfile 操作，从而更改变量并显示 <li>，但不知何故它无法按预期工作。

这是我的登录控制器。

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> 没有出现。我做得够不够，如果你有更好的建议请教我。

谢谢

【问题讨论】：

模板文件的名称是什么？
我将它们保存为 .hbs。这是模板文件夹的层次结构 ~/ember_login/public$ ls templates/ application.hbs profile.hbs signup.hbs auth.hbs signin.hbs ...... 每个模块都有自己的文件
我的猜测是您认为您使用的是 AuthController，但实际上您使用的是不同的。使用 Ember 调试器并查看视图层次结构并查看正在使用的控制器。
我不认为是这种情况，因为我在 Auth 中手动将其设置为 true 作为初始化。一切都很好。我在使用 ember 调试器时注意到的是该属性最初被认为是错误的。当事件发生时，控制器中的变量被设置为真（我记录并且它是真的），但模板中的变量没有得到更新。有什么想法吗？
虽然这没有帮助，但我在这里面临同样的问题。我什至尝试将loggedIn 包装在一个属性中并在视图中使用它：isChecked: false, checkedValue: function(){ return isChecked; }.property('isChecked'),，这在 OOTB 中不起作用。从动作调用 this.set 时值确实更新了，但模板没有更新

标签： javascript ember.js

【解决方案1】：

我正在回答我自己的问题，以防万一有人遇到同样的问题。我没有使用 Auth 资源，而是将逻辑移至 IndexController，并在 IndexController 中声明loggedIn。如果您使用控制器 A 更改/操作控制器 B 的变量，我注意到一件事，您可能能够修改其内容，但控制器 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，但我只需要更改名称即可。

希望对你有帮助！

【讨论】：