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?

Ryan Taylor · Answer 1 · 2014-06-05T04:52:57.773

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.

Set up custom ID for Text Fields

1 Answers1