templates - 使用 Ember.js 文本字段 id 作为 标签

Question

标签的形式如下:

<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"}}

使用此技术，用户现在可以单击标签来选择文本字段、复选框和选择。

Answer 1

首先，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"}}