Question

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

我使用类的原因是因为表通常是100％宽度，并且在弹出细节时它会改变大小。这还没有实现。现在，当我点击＆lt;时，我只想将'with-details'类插入到div中。 li＆gt;

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

在我的模板中，＆lt; li>有一个动作：

<li {{action 'showDetails'}}>

在我的控制器中触发showDetails动作（我知道它因为控制台中的:)而被触发）：

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

应该将with-detail类添加到我的详细信息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;
}

应该那么容易。我错过了什么？

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

错误：

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

右：

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

显示div，但不附加我可以定位的with-details类。

Answer 1

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

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

ember bind-attr类没有被控制器设置

1 个答案: