ember.js - Ember.js：如何获取输入元素 ID 以在标签中使用

Question

我有一种情况，我无法将标签包裹在输入元素周围，因此它必须看起来像这样：

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

我想设置标签的 for 属性以匹配输入元素的 ID，以便呈现的输出如下所示：

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

如何获得对元素 ID 的引用？我见过一些使用 Ember.TextField 视图的解决方案，但我正在寻找支持输入助手的解决方案（即 {{input}}）

Answer 1

您可以使用组件/视图 ID作为前缀，将输入元素的自定义 ID 限定为当前视图。这将帮助您避免视图外的命名冲突。您需要一个concat 助手（自 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

您仍然可以使用输入助手设置 id。所以

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

HTMLBarsapp/helpers/guid-for.js助手可能如下所示：

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('-');
});