Ember.jsラベルのfor属性を設定する

Question

ラベルとEmber入力コンポーネントを持つHTMLBarsテンプレートがあります。ラベル参照コンポーネントのfor属性を設定する最も良い方法は何ですか。コンポーネントの外側からコンポーネントIDにアクセスできる方法はありますか？私は手動で設定することができますコンポーネントのIDを設定することができますが、私はこれを避けることを避けたい場合は、IDの重複を引き起こします。

Answer 1

私は個人的にinputのidを入力フィールドと現在のコンポーネントID

はので、私の my-form.hbsに私はこれを行う：

<label for=(concat elementId '-username')>Username</label> 
{{input id=(concat elementId '-username') value=username}} 

<label for=(concat elementId '-password')>Username</label> 
{{input id=(concat elementId '-password') value=username}} 

これは、シンプルかつ効率的です。 elementIdはuniqなのでuniq idを保証します。たぶん、あなたもこれをラップするコンポーネントを書くことができ：

入力とラベル/ component.js

export default Ember.Component.extend({ 
    tagName: '', 
    inputId: Ember.computed({ 
    get() { 
     return Ember.guidFor(this)+'-inpudid'; 
    } 
    }) 
}); 

入力とラベル/ template.hbs

<label for=inputId>{{label}}</label> 
{{input id=inputId value=value placeholder=label}} 

そしてそれを使用してください：

{{input-with-label value=username label="Username"}} 
{{input-with-label value=password label="Password"}}