使用Ember.js文本字段标识< label>标签 [英] Using Ember.js text field ids for a <label> tag

问题描述

标签标签的格式如下：

 < label for =id_of_text_field> 
< input type =textname =exampleid =id_of_text_field/> 
  

标签的标签的文本字段的 id 标签需要匹配。我有两个想法来使我的Ember.js模板工作：

想法＃1：我试图制作一个名为 field_id 用于标签和 TextField 中。我执行如下：

 < label {{bindAttr for =content.field_id}}> {{content.label}}< /标签> 
 {{view Ember.TextField valueBinding =content.dataid =content.field_id}} 
  

不幸的是，只有标签的 id正确呈现。 TextField的 ID 不正确呈现，原来是metemorph ... something-or-other。

想法＃2：以某种方式召唤TextField的id并将其用于标签标签，但我恐怕在某些时候TextField的id将不会准备好标签标签被渲染。即使这不是一个问题，我不知道如何从JS中找到 TextField的 id。

在一个模板中，所以我将有多个这样的标签/ TextField对。

如何获取标签的 标签与TextField的 id 标签与Ember.js匹配？

谢谢！ p>

更新

使用Peter Wagenet的建议和轻微的修改，我做了以下： / p>

 < label {{bindAttr for =textField.elementId}}> {{content.label}}< /标签> 
 {{查看Ember.TextField valueBinding =content.valueviewName =textField}} 
  

使用这种技术，用户现在可以点击标签来选择TextFields，CheckBoxes和Selects。

解决方案

首先，Metamorph标签是标签的价值。它与该字段的id无关。但是，此代码仍然无法正常工作，因为标准属性不会对属性路径执行任何特殊操作。在这种情况下， id 的值是字面上的 content.field_id 。这当然不是你想要的。在正常情况下，您可以使用 elementIdBinding （ id 只是 elementId ），但是Ember Views的元素id不能在创建之后更改，所以这种方法在这里不起作用。

一个可能的解决方案使用 viewName 属性。 viewName 属性提供了对 parentView 的视图的命名引用。您可以执行以下操作：

 < label {{bindAttr for =view.textField.field_id}}> ; {{content.label}}< /标签> 
 {{view Ember.TextField valueBinding =content.dataviewName =textField}} 
  

A label tag is of the form:

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

Where the for tag of the label and the id tag of the text field need to match. I had two ideas to make this work in my Ember.js template:

Idea #1: I tried to make a special binding named field_id to use in both the label and the TextField. I executed this as follows:

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

Unfortunately only the label's id renders correctly. The TextField's id does not render correctly and turns out to be "metemorph... something-or-other".

Idea #2: To somehow conjure the TextField's id and use that for the label tag, but I'm afraid at some point the TextField's id will not be ready when the label tag is rendered. Even if this were not an issue, I do not know how to find the TextField's id from JS.

This is in a template so I will have more than one of these label/TextField pairs.

How can I get the label's for tag to match up with the TextField's id tag with Ember.js?

Thank you!

UPDATE

Using Peter Wagenet's advice and slight modification, I did the following:

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

Using this technique users can now click labels to select TextFields, CheckBoxes, and Selects.

解决方案

First off, the Metamorph tag is for the label's value. It's not related to the field's id. However, this code still won't work because standard properties don't do anything special with property paths. In this case, the value of id, is literally content.field_id. This is certainly not what you wanted. In normal circumstances, you could use elementIdBinding (id is just an alias for elementId), however the element ids for Ember Views cannot be changed after creation so that approach won't work here.

One possible solution makes use of the viewName property. The viewName property provides a named reference to the view on the parentView. You could then, do the following:

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

这篇关于使用Ember.js文本字段标识< label>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！