atributos de datos html en manillares ember.js

handlebars.js parsley.js

Question

Estoy tratando de hacer algo como esto:

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

Para usar parsley.js para validar mis entradas. (Sé que el correo electrónico puede usar type = "email") pero esto es solo un ejemplo.

Pero veo que el data-type="email" no se muestra en el HTML generado.

¿Hay alguna manera de que pueda agregar este atributo de datos HTML en una etiqueta de manillar?

Answer 1

Hay diferentes enfoques que puedes hacer:

Enfoque 1

Simplemente puede volver a abrir Ember.TextField y definir un Ember.TextField attributeBindings adicional, algo como:

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

ahora esto funcionará:

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

Ejemplo de trabajo.

Enfoque 2

Defina su propio campo de entrada personalizado extendiendo el campo de campo Ember.TextField

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

y úsalo así:

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

Ejemplo de trabajo.

Espero eso ayude.

Answer 2

Si está trabajando para integrar parsleyjs en su proyecto de CLI, aquí es cómo lo configuro. Tiene un buen número de atributos.

initializers/reopen-textfield.js como:

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

Creamos los initializers/reopen-checkbox.js como:

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

Estoy usando el proyecto ember cli para compilar mi aplicación.

Configuración actual en el momento de esta publicación:

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

Answer 3

Si usa Ember CLI, puede instalar un complemento Parsley.js . Agrega los archivos de la biblioteca a su proyecto y le permite usar atributos de datos de perejil.