Question

标签标签的格式为：

<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's id才能正确呈现。 TextField's ID 不正确呈现，结果是“metemorph ...... something-or-other”。

想法＃2：以某种方式召唤TextField的id并将其用于label标签，但是我担心在渲染label标签时TextField的id不会准备就绪。即使这不是问题，我也不知道如何从JS中找到TextField's id。

这是一个模板，所以我将有多个标签/ TextField对。

如何让标签的for标记与带有Ember.js的TextField的id标记相匹配？

谢谢！

更新

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

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

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

Answer 1

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

一种可能的解决方案是使用viewName属性。 viewName属性为parentView上的视图提供了命名引用。然后，您可以执行以下操作：

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

Answer 2

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

Answer 3

这是我在一段时间后解决这个问题的方法：

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

将Ember.js文本字段id用于<label>标记</label>

3 个答案: