Ember.js: how to get input element ID for use in label

Question

I have a scenario where I can't wrap the label around an input element, so it has to look something like this:

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

I'd like to set the label's for attribute to match the input element's ID so that the rendered output is something like this:

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

How can I get a reference to the element ID? I've seen some solutions where you use an Ember.TextField view, but I'm looking for a solution that supports the input helper (i.e. {{input}})

score 13 · Accepted Answer · 2016-10-26T15:59:44.333

13

You can scope a custom ID for the input element to the current view by using the component / view ID as a prefix. This will help you avoid naming collisions outside the view. You'll need a concat helper (included as of Ember v1.13.x). Or you can always create one, of course.

<label for="{{concat elementId '-name'}}">Name</label>
{{input value=name id=(concat elementId '-name')}}

Should render something like:

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

edited Oct 26 '16 at 15:59

answered Oct 01 '15 at 19:42

still valid in 12.2017 on ember 2.13 – fearis Dec 06 '17 at 15:03

score 4 · Answer 2 · answered Oct 26 '14 at 13:06

4

You can still set the id with input helpers. So

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

will result in

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

answered Oct 26 '14 at 13:06

Jakeii

1,273
9
16

1

I'd like to avoid hard coded IDs, because it can result in name collision. – Johnny Oshika Oct 26 '14 at 15:11
You can also supply a variable just as easily to each. as in `Name {{input value=name id=nameId}}` – Jakeii Oct 26 '14 at 16:36
or you wrap the input inside the label. – 0skar Oct 26 '14 at 22:47

score 4 · Answer 3 · answered Jan 07 '16 at 20:29

To flesh out these answers there is a more flexible way by use of an HTMLBars helper:

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

The app/helpers/guid-for.js HTMLBars helper could look like this:

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: how to get input element ID for use in label

3 Answers3