控制器未设置 ember bind-attr 类

Question

我正在创建一个主从表。 在选择一个项目之前，细节不应该是可见的，只有在点击一个项目时才可见。

我使用类的原因是因为表格通常是 100% 宽度，当细节弹出时它会改变大小。这还没有实现。现在，我只想在单击

时将“with-details”类插入到 div 中

这是一个粗略的解释： https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4

在我的模板中，

有一个动作：

<li {{action 'showDetails'}}>

在我的控制器中触发 showDetails 操作（我知道它正在触发是因为控制台中的 :)）：

  withDetails: false,
  actions: {
        showDetails: function() {
            console.log(":)");
            this.set('withDetails', true);
        }
    }

应该将带有详细信息的类添加到我的详细信息 div 中：

<div {{bind-attr class=":game-details withDetails"}} >

应该与我的 CSS 匹配：

.game-details {
    display: none;
    border: 1px solid red;
}
.game-details.with-details {
    display: block;
    border: 1px solid green;
}

应该就这么简单。我错过了什么？

[ EDIT ] 我刚刚学会了这个技巧：

错误：

<div class="game-details" {{bind-attr class="withDetails"}}>

对：

<div {{bind-attr class=":game-details withDetails"}}>

它显示了 div，但没有附加我可以定位的带有详细信息的类。

Answer 1

bind-attr is deprecated since 1.13 并从 2.0 开始禁用。相反，您应该在类属性中使用嵌入的 {{if}}，如下所示：

<div class="game-details {{if withDetails "with-details"}}">
  {{outlet}}
</div>