Ember.js: how to get input element id for use in shortcut

Question

I have a scenario where I cannot wrap a shortcut around an input element, so it should look something like this:

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

I would like the attribute label to match the identifier of the input element, so that the result looks something like this:

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

How can I get a link to the item ID? I saw some solutions in which you use the Ember.TextField view, but I am looking for a solution that supports the input helper (ie {{Input}})

Answer 1

As a prefix, you can specify a user identifier for the input element for the current view using the component / view ID . This will help you avoid naming collisions outside the view. You will need concat helper (including Ember v1.13.x). Or you can always create it, of course.

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

Should do something like:

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

Answer 2

To summarize these answers, there is a more flexible way to use the 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 might 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('-'); }); 

Answer 3

You can still set the identifier using 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">