ember.js 没有 {{bind Attr}} <label> For 属性到集合中正确的 inputField.elementId

Question

我正在尝试使用 {{bindAttr}} 和输入字段的 [viewName].elementId 将标签链接到输入字段。它适用于单个条目视图，但不适用于显示多条记录时：它只是将标签链接到集合中的最后一个输入字段。 （这曾经在以前的迭代中使用较旧的 ember 库，但现在不行。）我创建了一个 fiddle，但它的要点是：

{{#each controller}}
    <fieldset>              
        <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
        {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}                              
    </fieldset>
{{/each}}

我想也许我可以创建一个 collectionView 并为 viewName 创建一个计算属性，该属性将为集合中的每个项目生成一个唯一 ID，在回答另一个问题 here 时提到过。但这变得太复杂了——如果用户点击相应的标签，我可以让输入字段突出显示。

任何帮助表示赞赏。

Answer 1

围绕标签和输入字段创建一个包装器 Ember.View。我们就叫它App.FieldView：

App.FieldView = Ember.View.extend({
  tagName: 'fieldset'
});

然后在你的模板中：

{{#each controller}}
  {{#view App.FieldView}}              
    <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
    {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}                              
  {{/view}}
{{/each}}

小提琴：http://jsfiddle.net/NQKvy/26/

Answer 2

Panagiotis Panagi，已正确回答问题。我将添加发生这种情况的原因，即：- 链接到不正确的视图。

模板内的view 属性指的是包装html 标记的Ember 视图。但是，此属性根据其所处的上下文具有不同的值。

这个值取决于它放置的视图块。默认情况下，模板本身对应于这种情况下的视图ListOfPeopleTemplateView。

所以当你绑定到view.tbFullName.elementId 时，你实际上是绑定到{instance of ListOfPeopleTemplateView}.tbFullName.elementId。当循环结束时，唯一可见的tbFullName 是最后一个。

Panagiotis Panagi 的解决方案是将标签包装在另一个视图中，因此 view 的值会更改为该块内，因此指向正确的 tbFullName

最后，实现相同结果的更简单方法是将文本字段包装在标签内。那么你根本不需要label for 绑定。

<label>Full Name
  {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}    
</label>

看到这个jsfiddle

Answer 3

如果你想把事情做好，我必须承认表格有些棘手。但是有一个 ember 插件可以解决问题，例如 easyForm。

看看它可能会帮助您准确解决您面临的问题，例如为表单字段设置唯一标签等问题。

希望对你有帮助。