将不带值的数据属性分配给 Ember 组件答案

【问题标题】：Assigning a data attribute without a value to an Ember component将不带值的数据属性分配给 Ember 组件
【发布时间】：2015-01-28 17:44:43
【问题描述】：

我对 Ember 比较陌生，我正在使用 ember-cli-foundation-sass 插件将 Foundation 5 整合到一个 ember-cli 应用程序中。

我正在为 Foundation 的 topbar 元素构建一个 Ember 组件，我需要在导航上设置一个 data-topbar，如下所示：

<nav class="top-bar" data-topbar role="navigation">
  <!-- ... -->
</nav>

有没有办法在 Ember 组件中添加没有关联值的属性绑定？

以下添加role属性但不添加data-topbar：

// app/components/topbar-nav.js

export default Ember.Component.extend({
  tagName: 'nav',
  classNames: ['top-bar'],
  attributeBindings: ['role', 'data-topbar'],
  role: 'navigation',

  didInsertElement: function() {
    this.$().foundation();
  }
});

为data-topbar 设置任意值，如'data-topbar': 'foo'，将在导航上设置属性，但这不是我需要的：

<nav class="top-bar" data-topbar="foo" role="navigation">
  <!-- ... -->
</nav>

谢谢！

【问题讨论】：

标签： ember.js zurb-foundation ember-cli

【解决方案1】：

您始终可以将标记名设置为''，然后在组件模板中完成其余的工作：

App.NavBarComponent = Ember.Component.extend({
  tagName: '',
  role: 'navigation',

  didInsertElement: function() {
    this.$().foundation();
  }
});

<script type="text/x-handlebars" id="components/nav-bar">
  <nav class="top-bar" data-topbar {{bind-attr role=role}}>
    NAVBAR
  </nav>
</script>

工作演示here

【讨论】：

【解决方案2】：

如果您将属性的值设置为空字符串，那么这将为您提供所需的效果，即没有值的 HTML 属性。

export default Ember.Component.extend({
  tagName: 'option',
  attributeBindings: ['value'],
  value: '',
});

会给你：

<option value></option>

【讨论】：