I have a boolean variable focusBool
that hide the menu of the Web App when True. The Application template with the {{#if}} statement is below:
<script type="text/x-handlebars">
{{#if focusBool}}
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
{{#link-to 'home' tagName="li"}}
{{#link-to 'home'}}
Home
{{/link-to}}
{{/link-to}}
{{#link-to 'books' tagName="li"}}
{{#link-to 'books'}}
Books
{{/link-to}}
{{/link-to}}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav
{{/if}}
<div class='container-fluid'>
{{outlet}}
</div>
</script>
This variable has been injected to all routes, controllers and components. When the focusBool
is changed to true after the Application has loaded, the menu items do not disappear. How can I have the Application template be rerendered when the focusBool
is modified? My understanding is that the {{#if focusBool}}
would monitor when focusBool
value change and show or hide the menu accordingly?
Here more related code:
App.Session = Ember.Object.extend({
user: null,
focusBool: false,
userID: '',
});
Injection:
Ember.Application.initializer({
name: 'login',
initialize: function (container, application) {
App.register('session:main', App.Session.create(), { instantiate: false, singleton: true });
// Add `session` object to route to check user
App.inject('route', 'session', 'session:main');
// Add `session` object to controller to visualize in templates
App.inject('controller', 'session', 'session:main');
// Add `session` object to session to visualize in templates
App.inject('component', 'session', 'session:main');
}
});
The Application Route:
App.ApplicationRoute = Ember.Route.extend({
isAutheticated: null,
actions: {
login: function() {
//var session = this.get('session.');
var isAuth = false;
var store = this.store;
var user = null;
var _this = this;
var firebase = new Firebase("http://ift.tt/1pSmY6Q");
firebase.authWithOAuthPopup('facebook', function(error, authData) {
if (error) {
isAutheticated = false;
console.log('failled login attempt', error);
} else if (authData) {
isAutheticated = true;
console.log('user authenticated with Firebase', authData.uid);
var record = store.find('user', authData.uid).then(function(_user) {
console.log('user exist in Firebase');
_this.session.set('userID', authData.uid);
//_this.rerender();
}, function(error) {
// user does not exist or some other error
store.unloadAll('user');
user = store.createRecord('user', {
id: authData.uid,
uid: authData.uid,
displayName: authData.facebook.displayName,
});
user.save();
_this.session.set('userID', authData.uid)
_this.rerender();
console.log('New user created in Firebase');
});
}
});
},
logout: function() {
var firebase = new Firebase("http://ift.tt/1pSmY6Q");
firebase.unauth();
isAuth = false;
this.session.set('userID', '');
console.log('logged out');
}
}
});
Aucun commentaire:
Enregistrer un commentaire