O controlador Ember não atualiza o modelo após definir a propriedade como promessa
-
20-12-2019 - |
Pergunta
Posso estar fazendo isso terrivelmente errado, mas aqui vai:Estou obtendo o usuário do servidor e, uma vez resolvido, estou tentando renderizar o nome do usuário na página.O formulário de login é na verdade uma janela pop-up baseada nisso: http://www.sociallipstick.com/?p=86
Infelizmente, o modelo não muda quando eu defino userLoggedIn
para true
.Estou fazendo algo errado?
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>
Solução
Na verdade, esse bug foi causado por um problema totalmente diferente do que eu pensava.O retorno de chamada do script de login usou a linha [hacky] para obter o controlador de um pop-up fora do Ember:
window.opener.App.__container__.lookup('controller:User').send('recieveLogin', 'USERIDHERE');
Infelizmente, na verdade, isso estava obtendo uma instância diferente do controlador que não estava fazendo nada...
Então, modifiquei o controlador assim:
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);
});
}
}
});
E então usei a linha um pouco menos hackeada na página:
window.opener.App.UserController.callback.send('recieveLogin', 'USERIDHERE');