Set up custom ID for Text Fields

Question

how can I set up custom element id for form inputs. For example i would like to have prefixed or suffixed ids. This is what I got:

// views/extended-input.js
var suffix = function(key) {

return function() {
    var result = this.get(key) + '_' + this.get('suffix');
    console.log('xxx: ' + result);
    return result;
}.property(key, 'suffix');

};

export default Ember.TextField.extend({
   attributeBindings: ['id'],
   suffix: 'from',
   id: suffix('customId')
});

an in hbs template

{{view 'extended-input' customId=field.name suffix='from'}}

... but after rendering input still has ID attribute set up to generated with ember. This is sad, as I expected attributeBinding would change id to suffixed with version.

Any ideas why? Where am I wrong? Anybody could give me other working solution?

Answer 1

Try elementId instead of id, with no attribute binding. That's assuming field.name never changes.

The problem is that if there's a dynamic binding between the variable and an element's supposedly unique, static, self-identifying ID attribute, ember would get all confused (as would anything else) so be careful doing this.

You could also try classNameBindings, probably more appropriate, especially if field.name does change.