handlebar binding not working on parent template when navigating directly to child template

Question

Dashboard template:

<div id="main-container" class="container bgNotFaded" {{bind-attr class="faded:bgFaded"}}>

Dashboard controller:

export default Ember.ArrayController.extend({
   ...
   faded: false,
   ...
})

faded is the property I'm having trouble with.

Steps:
Navigate to --> www.example.com/dashboard
Then navigate through link to --> www.example.com/dashboard/account.
--- At this point everything works, my background fades and faded is set to true ---
Next I refresh page www.example.com/dashboard/account
--- And it's broke, the background isn't faded even though the accountRoute is loaded---

My accountRoute:

export default Authenticated.extend({
    renderTemplate: function() {
        this.render({
            into: 'dashboard',
            outlet: 'modal'
        });
    },
    setupController: function(controller){
        var dashController = this.controllerFor('dashboard');
        dashController.set('faded', true);
        ....
    },
    ...
)};

My router is setup like this:

this.resource('dashboard', {path: '/'}, function() {
    ...
    this.resource('account', {path: '/account'}, function() {

So I know the dashboard template is being loaded. In fact if I open the ember inspector I can see on my dashboardController that the property faded == true but the class bgFaded isn't in my rendered template.

Question Why when I navigate to the child route directly is the handlebar binding in my parent template not working?

Thanks.

My initial guess would be that when you refresh the page the faded's state is being reset. Is it possible to provide a jsbin example? — JDillon522
@JDillon522 faded's state is being reset. I can follow that in chrome by setting a breakpoint. So when page initially loads faded is false but when it hits the setupController of account faded is set to true. So faded is being set to true, but for some reason that's not adding the class bgFaded to my template. — Ryan

sheldonbaker sheldonbaker · Accepted Answer · 2014-08-29T20:52:38

I've had some issues when defining a class attribute on an element in addition to using bind-attr. Give this a shot?

<div id="main-container" {{bind-attr class=":container :bgNotFaded faded:bgFaded"}}>

handlebar binding not working on parent template when navigating directly to child template

1 Answers