Unique Form Element IDs
{
"version": "0.10.6",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.9.0",
"ember-data": "2.9.0",
"ember-template-compiler": "2.9.0",
"ember-testing": "2.9.0"
},
"addons": {}
}
<label for={{inputId}}>Label for <em>{{inputId}}</em>: </label>
{{yield inputId}}
<h1>Unique Form Element IDs</h1>
{{#form-group as |inputId|}}
{{input value=myValue id=inputId}}
{{/form-group}}
<p>The form input value is: {{if myValue myValue 'Empty'}}</p>
import Ember from 'ember';
export default Ember.Controller.extend();
import Ember from 'ember';
const {
get,
computed
} = Ember;
export default Ember.Component.extend({
id: null,
inputId: computed('id', function() {
// Fetch this component's ID, whether it be custom or Ember generated
const containerId = get(this, 'id') || get(this, 'elementId');
return `${containerId}-input`;
})
});