Ember.js: come arrivare all'ingresso elemento ID per l'uso in etichetta

Question

Ho uno scenario in cui non posso avvolgere l'etichetta intorno ad un elemento di input, quindi deve essere simile a questa:

<label>Name</label> 
{{input value=name}} 

mi piacerebbe impostare per l'attributo del marchio in modo che corrisponda ID dell'elemento ingresso in modo che l'output di rendering è qualcosa di simile:

<label for="ember351">Name</label> 
<input type="text" value="" id="ember351" /> 

Come posso ottenere un riferimento al ID elemento? Ho visto alcune soluzioni in cui si utilizza una vista Ember.TextField, ma sto cercando una soluzione che supporti l'input helper (ad esempio {{input}})

Answer 1

È possibile portata di un ID personalizzato per l'elemento di input per la vista corrente utilizzando il component/view ID come prefisso. Questo ti aiuterà ad evitare di nominare collisioni al di fuori della vista. Avrai bisogno di un concat helper (incluso da Ember v1.13.x). Oppure puoi sempre crearne uno, ovviamente.

<label for="{{concat elementId '-name'}}">Name</label> 
{{input value=name id=(concat elementId '-name')}} 

dovrebbe rendere qualcosa di simile:

<label for="ember351-name">Name</label> 
<input type="text" value="" id="ember351-name /> 

Answer 2

È ancora possibile impostare l'id con gli helper di input. Così

<label for="name">Name</label> 
{{input value=name id="name"}} 

si tradurrà in

<label for="name">Name</label> 
<input type="text" value="" id="name"> 

Answer 3

per rimpolpare queste risposte c'è un modo più flessibile con l'uso di un aiutante HTMLBars:

<div class="form-group"> 
    <label for="{{guid-for this "name"}}">Your name:</label> 
    {{input id=(guid-for this "name") 
      type="text" 
      value=value 
      placeholder="Enter your name…"}} 
</div> 

Il app/helpers/guid-for.js HTMLBars aiutante poteva guardare così:

import Ember from 'ember'; 

export default Ember.Helper.helper(function([obj, suffix]) { 
    Ember.assert('Must pass a valid object', obj); 
    return [Ember.guidFor(obj), suffix].join('-'); 
});