Ember.js: как получить идентификатор элемента ввода для использования в метке

Question

У меня есть сценарий, в котором я не могу обернуть метку вокруг элемента ввода, поэтому он должен выглядеть примерно так:

<label>Name</label>
{{input value=name}}

Я хотел бы установить метку атрибута for, чтобы он соответствовал идентификатору входного элемента, чтобы визуализированный вывод был примерно таким:

<label for="ember351">Name</label>
<input type="text" value="" id="ember351" />

Как я могу получить ссылку на идентификатор элемента? Я видел некоторые решения, в которых вы используете представление Ember.TextField, но я ищу решение, которое поддерживает помощника ввода (т. Е. {{Input}})

Answer 1

Вы можете добавить пользовательский идентификатор для элемента ввода в текущее представление, используя идентификатор компонента / представления в качестве префикса. Это поможет вам избежать именования коллизий за пределами вида. Вам понадобится concat helper (входит в Ember v1.13.x). Или вы всегда можете создать его, конечно.

<label for="{{concat elementId '-name'}}">Name</label>
{{input value=name id=(concat elementId '-name')}}

Должен сделать что-то вроде:

<label for="ember351-name">Name</label>
<input type="text" value="" id="ember351-name />

Answer 2

Вы все еще можете установить идентификатор с помощью помощников ввода. Так

<label for="name">Name</label>
{{input value=name id="name"}}

приведет к

<label for="name">Name</label>
<input type="text" value="" id="name">

Answer 3

Чтобы уточнить эти ответы, есть более гибкий способ с помощью помощника HTMLBars:

<div class="form-group">
  <label for="{{guid-for this "name"}}">Your name:</label>
  {{input id=(guid-for this "name")
          type="text"
          value=value
          placeholder="Enter your name…"}}
</div>

app/helpers/guid-for.js Помощник HTMLBars может выглядеть так:

import Ember from 'ember';

export default Ember.Helper.helper(function([obj, suffix]) {
  Ember.assert('Must pass a valid object', obj);
  return [Ember.guidFor(obj), suffix].join('-');
});