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助手（包含在Emberv1.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>

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