Question

我对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>

谢谢！

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组件

2 个答案: