19

标签标签的形式为：

<label for="id_of_text_field">
<input type="text" name="example" id="id_of_text_field" />

for标签的标签和id文本字段的标签需要匹配的地方。我有两个想法可以在我的 Ember.js 模板中完成这项工作：

想法 #1：我尝试创建一个特殊的绑定，以field_id在label和TextField. 我执行如下：

<label {{bindAttr for="content.field_id"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.data" id="content.field_id"}}

不幸的是，只有label'sid 才能正确呈现。TextField'sid 没有正确渲染，结果是“metemorph ... something-or-other”。

想法#2：以某种方式召唤TextField的ID并将其用于标签标签，但我担心在某些时候TextField的ID在呈现标签标签时不会准备好。即使这不是问题，我也不知道如何TextField's从 JS 中找到 id。

这是在模板中，因此我将拥有多个标签/文本字段对。

如何使用 Ember.js让标签的for标签与 TextField 的标签匹配？id

谢谢！

更新

使用 Peter Wagenet 的建议和稍作修改，我做了以下事情：

<label {{bindAttr for="textField.elementId"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.value" viewName="textField"}}

使用这种技术，用户现在可以单击标签来选择 TextFields、CheckBoxes 和 Selects。

4

3 回答 3

21

首先，Metamorph 标签用于标签的值。它与字段的 id 无关。但是，此代码仍然无法工作，因为标准属性不会对属性路径做任何特殊的事情。在这种情况下， 的值id实际上是content.field_id。这肯定不是你想要的。在正常情况下，您可以使用elementIdBinding(id只是 的别名elementId)，但是 Ember 视图的元素 ID 在创建后无法更改，因此这种方法在这里不起作用。

一种可能的解决方案是利用该viewName属性。该viewName属性提供了对parentView. 然后，您可以执行以下操作：

<label {{bindAttr for="view.textField.field_id"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.data" viewName="textField"}}
于 2012-05-06T05:05:51.223 回答
5

这并不总能解决您的问题，但我只想补充一点，简单地将输入嵌套在标签内通常是一种方便的解决方案，因为它允许您for完全删除属性（参考）。

于 2012-05-08T23:16:08.280 回答
1

这是我不久前对这个问题的解决方案：

App.Widget.TextField = Em.ContainerView.extend({
    tagName: '',
    type: 'text',
    label: null,
    value: null,
    valueSize: '30px',

    childViews: ['labelView', 'inputView'],

    labelView: Em.View.extend({
        tagName: 'label',
        attributeBindings: ['for'],

        forBinding: 'parentView.inputView.elementId',

        init: function () {
            this.set('defaultTemplate', Em.Handlebars.compile(this.getPath('parentView.label')));
            this._super();
        }
    }),

    inputView: Em.TextField.extend({
        typeBinding: 'parentView.type',
        sizeBinding: 'parentView.valueSize',
        valueBinding: 'parentView.value'
    })
});

然后从 Handlebars 模板中：

{{view App.Widget.TextField label="Some Label"}}
于 2012-05-06T16:31:39.163 回答