Bind data- attributes in input helper

Question

How can I bind data- attributes for the input helper in current versions of Ember?

DEBUG: -------------------------------
DEBUG: Ember             : 2.2.0
DEBUG: Ember Data        : 2.2.1
DEBUG: jQuery            : 1.11.3
DEBUG: Ember Simple Auth : 1.0.0
DEBUG: -------------------------------

This is my helper, but data- attributes are dropped ...

{{input id="price-slider" name="title" type="text" value=model.price data-slider-id="ex1Slider" data-slider-min=model.minPrice data-slider-max=model.maxPrice data-slider-step=model.priceStep data-slider-value=model.price}}

you can use regular bracket (angle brackets) for this case I guess — Bek, Jan 04 '16 at 14:49
@Bek: I just need them for, I don't know, let's say to let my slider library get the data- parameters needed to initialize the slider component, or for anything else, really, does not matter. I just need them. — blueFast, Jan 04 '16 at 15:06
@Bek: you say I can use "regular angle brackets". I would gladly use "regular angle brackets" all around and forget about the Ember `{{input}}` helper if it is not providing any value. What is the value provided by `{{input}}` as compared to ``, and why do you think I can just use the later? — blueFast, Jan 04 '16 at 15:26
@gonvald difference between `{{input}}` and `` is slowly disappearing as ember evolves, even now you can use angle bracket input with same functionality as curly bracket, have a look at my answer try taking that approach it should work I think — Bek, Jan 04 '16 at 15:59

score 1 · Accepted Answer · answered Jan 04 '16 at 14:57

1

By default, data attributes are not propagated. You can reopen the TextField component to propagate all the data attributes that you desire though, check this section of the official guides.

In alternative, if you want all data attributes to be automatically inherited you can either reopen or subclass the TextField component to make it propagate all data attributes by default:

Ember.TextField.extend({
  init: function() {
    this._super();
    var self = this;

    Object.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});

answered Jan 04 '16 at 14:57

Ju Liu

3,939
13
18

Thanks, and sorry, but that's just crazy. Ember is using ember-cli, with ES6 syntax, and the syntax in the guides seem to be the old global syntax. How can I reopen a Textfield in my ember-cli project? Which file, directory should I place this in? – blueFast Jan 04 '16 at 15:04
And more to the point: why are data- attributes not propagated? What is the underlying problem? – blueFast Jan 04 '16 at 15:05
Here's how to reopen built-in classes: http://stackoverflow.com/questions/27154886/ember-cli-where-to-reopen-framework-classes/27155720#27155720 – GJK Jan 04 '16 at 15:05
The reason why I think data attributes are not propagated by default is that it's bad for performance, since at the initialization of the component you have to go through all passed attributes. – Ju Liu Jan 04 '16 at 15:08
You can put the code anywhere, check this twiddle: https://ember-twiddle.com/42128b9c85ed6aaf208d In general, an initializer would be the place to go. In this case, I would strongly advise you to subclass the component and use your own version in your template, for better readability/mantainability. – Ju Liu Jan 04 '16 at 15:09
I would very much to subclass it and use my own version, but this would mean further complicating my app (define a component? extend an existing component? How do you do that in current ember versions? Is it a view? Are not views already deprecated for ember, in versions above 3.141592? I really don't remember). It is already hacky enough, and I want to touch it as little as possible – blueFast Jan 04 '16 at 15:22
@GJK: thanks for the link. I have defined an `overrides/textfield.js` and imported that from `app.js` – blueFast Jan 04 '16 at 15:24
@JuLiu: you say that data attributes are not propagated because of bad performance. But I don't get it. If I am coding data- attributes, it is because I need them, bad or good performance. I can not forget about them just because Ember's design is not able to cope with data- attributes in a performant way. Third party js libraries rely on data- attributes in the input elements for initialization purposes, and it is not in my power to just drop them. Why would Ember do that? – blueFast Jan 04 '16 at 15:32

score 1 · Answer 2 · answered Jan 04 '16 at 15:51

you can use regular bracket inputs just demonstrate that bindings work twiddle (not sure but data-attrs shouldn't be lost with them) in your template

<input onkeyup={{action 'inputChange' value='target.value'}}>
<input value={{inputVal}}>

in your controller

export default Ember.Controller.extend({
  inputVal: 'hello',
  actions: {
    inputChange(val) {
      this.set('inputVal', val);
    }
  }
});

btw if you want slider functionality have look at emberx-slider, ember-range-slider

Thanks, I'll try that. Is there any description about this transition to regular bracket inputs in the ember documentation? — blueFast, Jan 04 '16 at 16:08

Bind data- attributes in input helper

2 Answers2