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

【问题标题】：Ember.js: how to get input element ID for use in labelEmber.js：如何获取输入元素 ID 以在标签中使用
【发布时间】：2014-10-26 05:05:22
【问题描述】：

我有一种情况，我不能将标签包裹在输入元素周围，所以它必须看起来像这样：

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

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

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

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

【问题讨论】：

标签： ember.js ember.js-view

【解决方案1】：

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

【讨论】：

在 12.2017 的 ember 2.13 上仍然有效

【解决方案2】：

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

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

会导致

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

【讨论】：

我想避免使用硬编码的 ID，因为这会导致名称冲突。
您也可以轻松地为每个变量提供一个变量。如<label {{bind-attr for=nameId}}>Name</label> {{input value=name id=nameId}}
或者你将输入包装在标签内。

【解决方案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('-');
});

【讨论】：