Question

我有HTMLBars模板，它有标签和Ember输入组件，我想知道在标签引用组件上设置for属性的最佳方法是什么。有没有办法可以从组件外部访问组件ID。我知道你可以设置手动设置组件上的id但是我想避免这样做以防万一这会导致重复的id冲突

Answer 1

我个人手动将input上的id设置为输入字段和当前组件ID串联的结果。

所以在我的my-form.hbs我这样做：

<label for=(concat elementId '-username')>Username</label>
{{input id=(concat elementId '-username') value=username}}

<label for=(concat elementId '-password')>Username</label>
{{input id=(concat elementId '-password') value=username}}

这简单而有效。它将保证uniq id，因为elementId是uniq。也许你也可以编写一个组件来包装它：

输入与标签/ component.js

export default Ember.Component.extend({
  tagName: '',
  inputId: Ember.computed({
    get() {
      return Ember.guidFor(this)+'-inpudid';
    }
  })
});

输入与标签/ template.hbs

<label for=inputId>{{label}}</label>
{{input id=inputId value=value placeholder=label}}

然后使用它：

{{input-with-label value=username label="Username"}}
{{input-with-label value=password label="Password"}}

Ember.js在标签上设置for属性

1 个答案: