将Ember.js文本字段id用于<label>标记

Question

标签标签的形式如下:

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

当for标签的标签和id文本字段的标签必须匹配.我有两个想法可以在我的Ember.js模板中完成这项工作:

想法#1:我试图制作一个特殊的绑定命名field_id,用于label和TextField.我按如下方式执行:

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

不幸的是,只有label'sid正确呈现.该TextField'sID并没有正确地渲染和真可谓是"metemorph ......东西或-其他".

想法#2:以某种方式召唤TextField的id并将其用于label标签,但是我担心在渲染label标签时TextField的id不会准备就绪.即使这不是问题,我也不知道如何TextField's从JS中找到id.

这是一个模板,所以我将有多个这样的标签/ TextField对.

如何让标签的for标签与id带有Ember.js 的TextField 标签相匹配？

谢谢!

UPDATE

使用Peter Wagenet的建议和稍作修改,我做了以下事情:

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

使用此技术,用户现在可以单击标签以选择TextFields,CheckBoxes和Selects.

Answer 1

首先,Metamorph标签用于标签的值.它与该字段的id无关.但是,此代码仍然无法工作,因为标准属性不会对属性路径执行任何特殊操作.在这种情况下,字面值id是content.field_id.这肯定不是你想要的.在正常情况下,您可以使用elementIdBinding(id仅仅是别名elementId),但是在创建后无法更改Ember Views的元素ID,因此此方法不起作用.

一种可能的解决方案是使用该viewName属性.该viewName属性提供了对视图的命名引用parentView.然后,您可以执行以下操作:

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

Answer 2

这并不总能解决您的问题,但我只想补充说,简单地将输入嵌套在标签内通常是一种方便的解决方案,因为它允许您for完全删除属性(引用).