在 emberjs 中将 bind-attr 助手与输入助手一起使用答案

【问题标题】：Use bind-attr helper with input helper in emberjs在 emberjs 中将 bind-attr 助手与输入助手一起使用
【发布时间】：2015-01-16 06:54:35
【问题描述】：

我想同时使用 bind-attr 和输入助手，这样我就可以将类分配给我的输入字段。我有一个解决方法，比如创建一个父 dom 并在其上使用 bind-attr

<td {{bind-attr class="showmsg:alert-msg"}} >{{input type="text" value=rank}}</td>

如何在输入助手中使用 bind-attr？

【问题讨论】：

【解决方案1】：

请参阅Views: Customizing a View's Element 了解一般视图自定义。

classNameBindings 的使用方式与上面bind-attr 中使用的方式大致相同。

鉴于：

export default Ember.TextField.extend({
  classNameBindings: ['showmsg:alert-msg'],
  showmsg: true
});

如果你想做动态类之类的事情，你可以通过例如controller 将值传递给你的view：

在模板中：

{{view 'some-td-view' classBinding="typeClass"}}

其中typeClass 指的是controller 上的属性

在控制器中：

typeClass: function() {
    return this.get('type');
}.property('type')

在视图中 (views/some-td-view.js)：

export default Ember.TextField.extend({
  tagName: 'td',
  classNames: ['some-default-class'],
});

因此，取决于controller 的type 值，您可以拥有一个变量typeClass。对于 type 的 multi 将导致以下视图：

<td class="some-default-class multi"></td>

而一个 type 的 single 会导致：

<td class="some-default-class single"></td>

【讨论】：