Question

我有一个场景，我不能在输入元素周围包装标签，所以它必须看起来像这样：

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

我想设置标签的属性以匹配输入元素的ID，以便渲染的输出是这样的：

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

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

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

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

Ember.js：如何获取用于标签的输入元素ID

3 个答案: