CODEWITHSUNDEEP
ember.js
Govind Samrow
Govind Samrow

Reputation: 10187

data-value attribute in emberjs

I want to add data-value attribute in input element:

{{input type="text" data-value=ec.ec_id  value=ec.ecl_subject placeholder=ec.ecl_en_subject name="ecl_subject"  class="form-control" }}

But its not visible in browser:

<input id="ember874" class="ember-view ember-text-field form-control" placeholder="Doctor4US: Appointment" type="text" name="ecl_subject">

Upvotes: 1

Views: 1555

Answers (2)

Govind Samrow
Govind Samrow

Reputation: 10187

ADDING DATA ATTRIBUTES

By default, view helpers do not accept data attributes

i.e. 

{{input type="text" data-value=ec.ec_id  value=ec.ecl_subject name="ecl_subject" }}

Render as

<input id="ember257" class="ember-view ember-text-field" type="text" value="12">

There are two ways to enable support for data attributes. One way would be to add an attribute binding on the view, e.g. Ember.TextField for the specific attribute:

Ember.TextField.reopen({
  attributeBindings: ['data-value']
});

Now the same handlebars code above renders the following HTML:

<input id="ember259" class="ember-view ember-text-field" 
       type="text" data-value="110" value="12">

You can also automatically bind data attributes on the base view with the following:

Ember.View.reopen({
  init: function() {
    this._super();
    var self = this;

    // bind attributes beginning with 'data-'
    Em.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});

For more detail reffer:https://guides.emberjs.com/v1.10.0/templates/binding-element-attributes/

Upvotes: 1

Sumit Surana
Sumit Surana

Reputation: 1584

Ember Input helpers doesn't allow data-attributes. The list of allowed attributes can be found at https://guides.emberjs.com/v2.6.0/templates/input-helpers/

The solution for problem is that you use html tag itself, when you want to place data-attributes like below

<input type="text" data-value="{{ec.ec_id}}" value="{{ec.ecl_subject}}" placeholder="{{ec.ecl_en_subject}}" name="ecl_subject" class="form-control/>

Upvotes: 0

Related Questions