@ember-lux/id-helper NPM

@ember-lux/id-helper

This addons provides an id helper. It can be used like this:

components/my-component.hbs

<label for={{id "firstname"}}>Firstname</label>
<input id={{id "firstname"}}>

<label for={{id "lastname"}}>Lastname</label>
<input id={{id "lastname"}}>

This will generate uniquie ids like i1234-firstname and i1234-lastname. The id is unique to the scope. So you can have an firstname id in multiple places of your app and it will never collide.

You can even call a component multiple times and each call will get its unique id:

<MyComponent />
<MyComponent />

This will then generate ids like i1234-firstname, i1234-lastname, i5678-firstname and i5678-lastname.

How it works

This is not necessary to know to use this addon but it can help to provide some context.

Basically this addon wraps all your templates with a {{#let}}. So this:

<label for={{id "firstname"}}>Firstname</label>
<input id={{id "firstname"}}>

becomes this:

{{#let (ember-lux-id-helper-context) as |emberLuxIdHelperContext|}}
  <label for={{id emberLuxIdHelperContext "firstname"}}>Firstname</label>
  <input id={{id emberLuxIdHelperContext "firstname"}}>
{{/let}}

Where the ember-lux-id-helper-context helper just returns a random number and the id helper just joins all arguments together.