Html-атрибуты данных в дескрипторах ember.js

Я пытаюсь сделать что-то вроде этого:

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

Чтобы использовать parsley.js для проверки моих входов. (Я знаю, что электронная почта может использовать type = "email" ), но это всего лишь пример.

Но я вижу, что data-type="email" не отображается в сгенерированном HTML.

Есть ли способ добавить этот атрибут данных HTML в тег handlebars?

Ответ 1

Существуют различные подходы, которые вы можете сделать:

Подход 1

Вы можете просто открыть Ember.TextField и определить дополнительные attributeBindings, что-то вроде:

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

теперь это будет работать:

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

Рабочий пример.

Подход 2

Определите собственное поле ввода, расширяющее ember Ember.TextField

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

и используйте его следующим образом:

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

Рабочий пример.

Надеюсь, что это поможет.

Ответ 2

Если вы работаете над интеграцией parsleyjs в свой проект CLI, вот как я это установил. Он имеет большое количество атрибутов.

Создано 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'
      ]
    });
  }
};

Создан initializers/reopen-checkbox.js как:

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

Я использую проект ember cli для создания моего приложения ember.

Текущая настройка на момент публикации:

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: -------------------------------

Ответ 3

Если вы используете Ember CLI, вы можете установить аддон Parsley.js. Он добавляет файлы библиотеки в ваш проект и позволяет использовать атрибуты данных parsley.