html data- attributes in ember.js handlebars

Question

I am trying to do something like this:

{{input value=email type="text" data-type="email"}}

In order to use parsley.js to validate my inputs. (I know email can use type="email") but this is just an example.

But I am seeing that the data-type="email" is not showing up in the generated HTML.

Is there some way I can add this HTML data- attribute into a handlebars tag?

Apotropaic

Answer 1

There are different approaches you can do it:

Approach 1

You can just reopen Ember.TextField and define additional attributeBindings, something like:

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

now this will work:

{{input value=email type="text" data-type="email"}}

Working example.

Approach 2

Define your own custom input field extending ember's Ember.TextField

App.MyTextField = Ember.TextField.extend({
  attributeBindings: ['data-type']
});

and use it like this:

{{view App.MyTextField value=email type="text" data-type="email"}}

Working example.

Hope it helps.

Sanctum

I tried this for Ember.LinkView but it didn't work. For the record, this is what I did js Ember.LinkView.reopen({ attributeBindings: ['data-toggle'] }); and my template is html {{#link-to 'index' class="dropdown-toggle" data-toggle="dropdown"}} Home {{/link-to}} – Kakalina

If you need to output the attribute using a different name, you can reference any property in your component like so: attributeBindings: ['dataType: data-type] This will output the value of dataType as the data-type attribute. – Spithead

Answer 2

If you are working to integrate parsleyjs into your CLI project, here is how I set that up. It has a good number of attributes.

Created initializers/reopen-textfield.js as:

export default {
  name: 'textfield-configuration',
  initialize: function() {
    Ember.TextField.reopen({
      attributeBindings: [
        'parsley-type',
        'parsley-required-message',
        'parsley-type-email-message',
        'placeholder'
      ]
    });
  }
};

Created initializers/reopen-checkbox.js as:

export default {
  name: 'checkbox-configuration',
  initialize: function() {
    Ember.Checkbox.reopen({
      attributeBindings: [
        'parsley-type',
        'parsley-required-message',
        'parsley-type-email-message',
        'parsley-group',
        'placeholder'
      ]
    });
  }
};

I am using the ember cli project to build my ember application.

Current setup at the time of this post:

DEBUG: -------------------------------
DEBUG: Ember      : 1.5.1 vendor.js:15554
DEBUG: Ember Data : 1.0.0-beta.8.2a68c63a vendor.js:15554
DEBUG: Handlebars : 1.3.0 vendor.js:1555
DEBUG: jQuery     : 2.1.1
DEBUG: -------------------------------

Volleyball

Answer 3

If you use Ember CLI, you can install a Parsley.js addon. It adds the library files to your project, and allows you to use parsley data attributes.

Finlay