Uso Ember.js ids campo di testo per un tag

Question

Un'etichetta tag è della forma:

<label for="id_of_text_field"> 
<input type="text" name="example" id="id_of_text_field" /> 

Dove il tag for dell'etichetta e la id tag del campo di testo devono corrispondere. Ho avuto due idee per fare questo lavoro nel mio modello Ember.js:

Idea # 1: Ho provato a fare uno speciale legame di nome field_id da utilizzare sia nel label e TextField. Ho eseguito in questo modo:

<label {{bindAttr for="content.field_id"}}> {{content.label}}</label> 
{{view Ember.TextField valueBinding="content.data" id="content.field_id"}} 

Purtroppo solo il label's id rende correttamente. L'ID TextField's non esegue il rendering non correttamente e risulta essere "metemorph ... something-or-other".

Idea # 2: di evocare in qualche modo id del TextField e l'uso che per il tag label, ma ho paura ad un certo punto id del TextField non sarà pronto quando il tag etichetta viene reso. Anche se questo non fosse un problema, non so come trovare l'ID TextField's da JS.

Questo è in un modello quindi avrò più di una di queste coppie label/TextField.

Come posso ottenere il tag for dell'etichetta per abbinarlo al tag id del TextField con Ember.js?

Grazie!

UPDATE

Utilizzando il consiglio di Peter Wagenet e leggera modifica, ho fatto la seguente:

<label {{bindAttr for="textField.elementId"}}> {{content.label}}</label> 
{{view Ember.TextField valueBinding="content.value" viewName="textField"}} 

Utilizzando questa tecnica gli utenti possono ora fare clic per selezionare le etichette TextFields, caselle di controllo, e di selezionare.

Answer 1

Prima di tutto, il tag Metamorph è per il valore dell'etichetta. Non è correlato all'ID del campo. Tuttavia, questo codice non funzionerà ancora perché le proprietà standard non fanno nulla di speciale con i percorsi delle proprietà. In questo caso, il valore di id è letteralmente content.field_id. Questo non è certamente quello che volevi. In circostanze normali, è possibile utilizzare elementIdBinding (id è solo un alias per elementId), tuttavia non è possibile modificare gli ID degli elementi per le viste di ambra dopo la creazione, in modo che l'approccio non funzioni qui.

Una possibile soluzione utilizza la proprietà viewName. La proprietà viewName fornisce un riferimento con nome alla vista sullo parentView.Si potrebbe quindi, effettuare le seguenti operazioni:

<label {{bindAttr for="view.textField.field_id"}}> {{content.label}}</label> 
{{view Ember.TextField valueBinding="content.data" viewName="textField"}} 

Answer 2

Qui è stata la mia soluzione a questo problema da un po 'indietro:

App.Widget.TextField = Em.ContainerView.extend({ 
    tagName: '', 
    type: 'text', 
    label: null, 
    value: null, 
    valueSize: '30px', 

    childViews: ['labelView', 'inputView'], 

    labelView: Em.View.extend({ 
     tagName: 'label', 
     attributeBindings: ['for'], 

     forBinding: 'parentView.inputView.elementId', 

     init: function() { 
      this.set('defaultTemplate', Em.Handlebars.compile(this.getPath('parentView.label'))); 
      this._super(); 
     } 
    }), 

    inputView: Em.TextField.extend({ 
     typeBinding: 'parentView.type', 
     sizeBinding: 'parentView.valueSize', 
     valueBinding: 'parentView.value' 
    }) 
}); 

Poi all'interno di un modello di manubrio:

{{view App.Widget.TextField label="Some Label"}} 

Answer 3

Questo won risolvo sempre il tuo problema, ma volevo solo aggiungere che semplicemente l'annidamento dell'input all'interno dell'etichetta è spesso una soluzione conveniente, dal momento che ti consente di eliminare del tutto l'attributo for (reference).