Присвоение атрибута данных без значения компоненту Ember

Question

Я относительно новичок в Ember и включил Foundation 5 в приложение ember-cli с помощью дополнения ember-cli-foundation-sass.

Я строй компонента Ember для topbar элемента Фонда, и мне нужно, чтобы установить 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>