ember.js把手中的html数据属性

Question

我正在尝试做这样的事情：

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

为了使用parsley.js来验证我的输入。 （我知道电子邮件可以使用type =“email”）但这只是一个例子。

但我发现data-type="email"没有出现在生成的HTML中。

我是否可以通过某种方式将此HTML数据属性添加到手柄标记中？

Answer 1

您可以采用不同的方法：

方法1

您可以重新打开Ember.TextField并定义其他attributeBindings，例如：

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

现在这将有效：

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

Working example.

方法2

定义您自己的自定义输入字段，扩展余烬的Ember.TextField

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

并像这样使用它：

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

Working example.

希望它有所帮助。

Answer 2

如果您正在努力将parsleyjs集成到CLI项目中，请按以下步骤进行设置。它有很多属性。

将initializers/reopen-textfield.js创建为：

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

Answer 3

如果您使用Ember CLI，则可以安装Parsley.js addon。它将库文件添加到项目中，并允许您使用parsley数据属性。