余烬模板不更新属性变量的变化

ember template not update on property variable change

本文关键字：变量 变化 属性 更新 余烬模      更新时间：2023-09-26

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

这是我的模板的一个片段:

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

变量为loggedIn，如果为true则显示该列表，否则隐藏该列表。模板名为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>没有出现。我做得够不够，如果你有更好的建议请指教。

谢谢

我在回答我自己的问题，以防有人有同样的问题。我没有使用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，但不是更改名称，这就是我所需要做的。

希望有帮助!

相关文章：