Использование идентификаторов текстового поля Ember.js для тега <label>

Тег метки имеет вид:

<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 отображается правильно. TextField's id делает не рендеринг правильно и оказывается "metemorph... something-or-other".

Идея № 2: Чтобы каким-то образом вызвать идентификатор TextField и использовать его для тега метки, но я боюсь, что в какой-то момент идентификатор TextField не будет готов, когда будет выведен тег метки. Даже если это не проблема, я не знаю, как найти идентификатор TextField's из JS.

Это в шаблоне, поэтому у меня будет более одной пары этих меток /TextField.

Как я могу получить ярлык for для соответствия тегу TextField id с Ember.js?

Спасибо!

UPDATE

Используя советы Peter Wagenet и небольшую модификацию, я сделал следующее:

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

Используя этот метод, пользователи теперь могут щелкнуть метки, чтобы выбрать TextFields, CheckBoxes и Selects.

Ответ 1

Во-первых, тег Metamorph предназначен для значения метки. Это не связано с идентификатором поля. Однако этот код все равно не будет работать, потому что стандартные свойства не делают ничего особенного с путями свойств. В этом случае значение id, буквально content.field_id. Это, конечно, не то, что вы хотели. В обычных условиях вы можете использовать elementIdBinding (id - это просто псевдоним для elementId), однако идентификаторы элементов для Ember Views не могут быть изменены после создания, поэтому этот подход не будет работать здесь.

Одно из возможных решений использует свойство viewName. Свойство viewName предоставляет именованную ссылку на представление на parentView. Тогда вы можете сделать следующее:

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

Ответ 2

Это не всегда будет решать вашу проблему, но я просто хотел добавить, что просто вложенность ввода внутри метки часто является удобным решением, поскольку она позволяет полностью отбросить атрибут for (ссылка).

Ответ 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"}}