Назначение данных атрибут без значения Эмбер компонент

, что я относительно новичок в Эмбер, и я, включающий основание, 5 в Эмбер-CLI и приложения используя Эмбер-CLI и-Фонд-Сасс аддон.

Я создаю компонент Ember для элемента topbar Foundation, и мне нужно установить 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>

Спасибо!

2 2
ember.js ember-cli

2 ответа:

Вы всегда можете установить tagname в '' и сделать все остальное в шаблоне компонента: 

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>

Рабочая демонстрация здесь

0

Если вы зададите значение атрибута как пустую строку, то это даст вам желаемый эффект, т. е. атрибут HTML без значения.

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

Даст вам: 

<option value></option>
0