标签的形式如下:
<label for="id_of_text_field">
<input type="text" name="example" id="id_of_text_field" />
标签的 for
标记和文本字段的 id
标记需要匹配。我有两个想法可以在我的 Ember.js 模板中实现此功能:
想法#1:我尝试创建一个名为field_id
的特殊绑定(bind),以在label
和TextField<中使用
。我执行如下:
<label {{bindAttr for="content.field_id"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.data" id="content.field_id"}}
不幸的是,只有标签的
id 能够正确呈现。 TextField 的
id 无法正确渲染,结果是“变形...某物或其他”。
想法#2:以某种方式调用 TextField 的 id 并将其用于标签标记,但我担心在渲染标签标记时,TextField 的 id 在某些时候还没有准备好。即使这不是问题,我也不知道如何从 JS 中找到 TextField's
id。
这是在模板中,因此我将拥有多个标签/文本字段对。
如何使用 Ember.js 使标签的 for
标记与 TextField 的 id
标记相匹配?
谢谢!
更新
根据 Peter Wagenet 的建议并稍作修改,我执行了以下操作:
<label {{bindAttr for="textField.elementId"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.value" viewName="textField"}}
使用此技术,用户现在可以单击标签来选择文本字段、复选框和选择。
最佳答案
首先,Metamorph 标签用于标签的值。它与字段的 id 无关。但是,此代码仍然无法工作,因为标准属性不会对属性路径执行任何特殊操作。在本例中,id
的值实际上是 content.field_id
。这当然不是你想要的。在正常情况下,您可以使用 elementIdBinding
(id
只是 elementId
的别名),但是 Ember View 的元素 id 在之后无法更改创建,因此该方法在这里不起作用。
一种可能的解决方案是使用viewName
属性。 viewName
属性提供对 parentView
上 View 的命名引用。然后,您可以执行以下操作:
<label {{bindAttr for="view.textField.field_id"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.data" viewName="textField"}}
关于templates - 使用 Ember.js 文本字段 id 作为 <label> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10468164/