Le contrôleur Ember n'actualise pas le modèle après avoir défini la propriété dans la promesse
-
20-12-2019 - |
Question
Je fais peut-être horriblement mal, mais voici :Je récupère l'utilisateur du serveur et une fois le problème résolu, j'essaie d'afficher le nom de l'utilisateur sur la page.Le formulaire de connexion est en fait une fenêtre contextuelle basée sur ceci : http://www.sociallipstick.com/?p=86
Malheureusement, le modèle ne change pas du tout lorsque je définis userLoggedIn
à true
.Est-ce que je fais quelque chose de mal?
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>
La solution
Ce bug était en fait causé par un problème totalement différent de celui que je pensais.Le rappel du script de connexion utilisait la ligne [hacky] pour obtenir le contrôleur à partir d'une fenêtre contextuelle en dehors d'Ember :
window.opener.App.__container__.lookup('controller:User').send('recieveLogin', 'USERIDHERE');
Malheureusement, il s'agissait en fait d'une instance différente du contrôleur qui ne faisait rien...
J'ai donc modifié le contrôleur comme ceci :
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);
});
}
}
});
Et puis j'ai utilisé la ligne légèrement moins hacky de la page :
window.opener.App.UserController.callback.send('recieveLogin', 'USERIDHERE');