javascript - 直接导航到子模板时， handle 绑定(bind)不适用于父模板

Question

仪表板模板:

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

仪表板 Controller :

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

faded 是我遇到问题的属性。

步骤:
导航至 --> www.example.com/dashboard
然后通过链接导航至 --> www.example.com/dashboard/account。
--- 此时一切正常，我的背景淡出并且 faded 设置为 true ---
接下来我刷新页面 www.example.com/dashboard/account
--- 而且它坏了，即使加载了 accountRoute 背景也没有褪色 ---

我的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);
        ....
    },
    ...
)};

我的路由器设置如下:

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

所以我知道仪表板模板正在加载。事实上，如果我打开 ember 检查器，我可以在 dashboardController 上看到属性 faded == true 但类 bgFaded 不在我的渲染模板。

问题为什么当我直接导航到子路线时，父模板中的 Handlebars 绑定(bind)不起作用？

谢谢。

Answer 1

除了使用 bind-attr 之外，在元素上定义类属性时我还遇到了一些问题。尝试一下吗？

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