【问题标题】:Ember controller not refreshing template after setting property in promise在 Promise 中设置属性后,Ember 控制器不刷新模板
【发布时间】:2014-02-24 23:46:21
【问题描述】:

我可能做错了,但这里是:我从服务器获取用户,一旦解决,我试图将用户名呈现到页面。登录表单其实就是基于这个的弹窗:http://www.sociallipstick.com/?p=86

不幸的是,当我将userLoggedIn 设置为true 时,模板根本没有改变。我做错了吗?

App.UserController = Ember.Controller.extend({
    userLoggedIn: false,
    actions: {
        displayLoginForm: function () {
            //displays a login form
        },
        recieveLogin: function (authResult) {
            //hides login form
            var userPromise = this.store.find('user', authResult); // successfully gets user from server (as far as I can tell)
            var self = this;
            userPromise.then(function (user) {
                self.set('model', user);
                self.set('userLoggedIn', true);
            });
        }
    }
});
<li class="navbar-form">
    {{#if userLoggedIn}}
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">My quizzes</a></li>
            <li><a href="#">My scores</a></li>
            <li><a href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#">Logout</a></li>
        </ul>
    {{else}}
        <button class="btn btn-default" {{action 'displayLoginForm'}}>Login</button>
    {{/if}}
</li>

【问题讨论】:

  • 代码看起来不错,你可以发送一个 jsbin 来重现这个问题吗?
  • 我在想的是导航栏可能绑定到不同的控制器...userLoggedIn 默认为未定义(如果绑定到另一个控制器),在#if 中评估为 false陈述。您可以添加 {{debugger}} 并检查 content 属性以查看它是否绑定到正确的控制器。
  • 谢谢!原来它在 MWE 中工作,所以我发现错误在其他地方......
  • 有趣,所以最后它确实是一个不同的控制器。这是一个随机的猜测,我很高兴这有帮助。

标签: javascript ember.js ember-data ember-controllers


【解决方案1】:

这个错误实际上是由一个与我想象的完全不同的问题引起的。登录脚本的回调使用 [hacky] 行从 Ember 外部的弹出窗口中获取控制器:

window.opener.App.__container__.lookup('controller:User').send('recieveLogin', 'USERIDHERE');

不幸的是,这实际上得到了一个不同的控制器实例,它什么都不做......

所以,我像这样修改了控制器:

App.UserController = Ember.Controller.extend({
    userLoggedIn: false,
    actions: {
        displayLoginForm: function () {
            //displays a login form
            /******** THIS IS THE IMPORTANT LINE ********/
            App.UserController.callback = this;
            /******** THAT WAS THE IMPORTANT LINE ********/
        },
        recieveLogin: function (authResult) {
            //hides login form
            var userPromise = this.store.find('user', authResult); // successfully gets user from server (as far as I can tell)
            var self = this;
            userPromise.then(function (user) {
                self.set('model', user);
                self.set('userLoggedIn', true);
            });
        }
    }
});

然后我在页面上使用了稍微少一点的 hacky 行:

window.opener.App.UserController.callback.send('recieveLogin', 'USERIDHERE');

【讨论】:

  • 不太确定自我回答有什​​么礼仪,但这就是为我解决的问题。道德:不要使用骇人听闻的解决方案!
  • 我觉得回答你自己的问题就可以了,过几天你甚至可以接受。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-05
  • 2017-08-14
  • 1970-01-01
相关资源
最近更新 更多