3

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

{{#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，在回答另一个问题时提到这里。但这变得太复杂了——只要用户点击相应的标签，我就可以让输入字段突出显示。

任何帮助表示赞赏。

4

3 回答 3

3

在标签和输入字段周围创建一个包装器 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/

于 2013-07-09T22:57:07.537 回答
3

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

于 2013-07-10T04:16:51.697 回答
1

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

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

希望能帮助到你。

于 2013-07-09T20:12:46.197 回答