将没有值的数据属性分配给 Ember 组件

Question

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

我正在为 Foundation 的顶部栏元素构建一个 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>

谢谢！

Answer 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

Answer 2

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

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

会给你：

<option value></option>

将没有值的数据属性分配给 Ember 组件

Assigning a data attribute without a value to an Ember component

ember.js

zurb-foundation

ember-cli