Uso de Ember.js ids campo de texto para una etiqueta

Question

Una etiqueta etiqueta es de la forma:

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

Cuando la etiqueta for de la etiqueta y la etiqueta id del campo de texto necesario para que coincida. Tenía dos ideas para hacer este trabajo en mi plantilla Ember.js:

Idea # 1: Traté de hacer una unión especial nombrado field_id utilizar tanto en el label y la TextField. Ejecuté la siguiente manera:

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

Por desgracia sólo el label's Identificación procesa de forma correcta. La identificación TextField's hace no se procesa correctamente y resulta ser "metemorph ... something-or-other".

Idea # 2: Para conjurar de alguna manera el ID de TextField y usarlo para la etiqueta, me temo que en algún momento el ID de TextField no estará listo cuando se represente la etiqueta. Incluso si esto no fuera un problema, no sé cómo encontrar la identificación TextField's de JS.

Esto está en una plantilla, así que tendré más de una de estas etiquetas/pares de campos de texto.

¿Cómo puedo obtener la etiqueta for para que coincida con la etiqueta id de TextField con Ember.js?

¡Gracias!

ACTUALIZACIÓN

Consejo de utilización de Peter Wagenet y ligera modificación, hice lo siguiente:

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

Usando esta técnica los usuarios ahora pueden hacer clic para seleccionar las etiquetas de campos de texto, casillas de verificación, y selecciona.

Answer 1

En primer lugar, la etiqueta Metamorph es para el valor de la etiqueta. No está relacionado con la identificación del campo. Sin embargo, este código aún no funcionará porque las propiedades estándar no hacen nada especial con las rutas de propiedad. En este caso, el valor de id, es literalmente content.field_id. Esto ciertamente no es lo que querías. En circunstancias normales, puede usar elementIdBinding (id es solo un alias para elementId), sin embargo, los identificadores de elemento para Vistas de color ámbar no se pueden cambiar después de la creación, por lo que ese enfoque no funcionará aquí.

Una posible solución hace uso de la propiedad viewName. La propiedad viewName proporciona una referencia con nombre a la vista en el parentView.A continuación, puede, hacer lo siguiente:

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

Answer 2

Aquí fue mi solución a este problema desde hace un tiempo:

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' 
    }) 
}); 

A continuación, desde el interior de una plantilla Manillar:

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

Answer 3

Este won 't siempre resuelve su problema, pero solo quería agregar que simplemente anidar la entrada dentro de la etiqueta es a menudo una solución conveniente, ya que le permite soltar el atributo for (reference).