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 View。但是，此属性具有不同的值，具体取决于它所处的上下文。

此值取决于它所放置的视图块。默认情况下，模板本身对应于本例中的视图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

表格有点棘手我必须承认，如果你想做正确的事情。但是有一个拯救的余烬附加物，例如easyForm。

看看它可能会帮助您解决您遇到的问题，例如为您的表单字段添加唯一标签等问题。

希望它有所帮助。

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

3 个答案: