Ember 구성 요소에 값이없는 데이터 속성 할당

Question

저는 Ember에 비교적 익숙하며 ember-cli-foundation-sass addon을 사용하는 ember-cli 응용 프로그램에 Foundation 5를 통합했습니다.

나는 재단의 topbar 요소에 대한 엠버 구성 요소를 짓고 있어요, 내가 그렇게처럼 탐색에 data-topbar을 설정해야합니다

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

를 아무 관련 값에 바인딩 속성을 추가 할 수있는 방법이 있나요 Ember 구성 요소? 다음

는

role 속성이 아닌 data-topbar 추가 : 'data-topbar': 'foo'처럼, 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(); 
    } 
}); 

의 탐색 메뉴의 속성을 설정됩니다,하지만 그건 내가 원하는 게 아니에요 :

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