jeudi 1 janvier 2015

Ember: How do bindings work in the application template?

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