html - ember.js 车把中的 html 数据属性

Question

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

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

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

但我看到data-type="email"生成的 HTML 中没有显示。

有什么方法可以将此 HTML 数据属性添加到车把标签中吗？

Answer 1

您可以采用不同的方法：

方法一

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

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

现在这将起作用：

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

工作示例。

方法二

定义您自己的扩展 ember 的自定义输入字段Ember.TextField

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

并像这样使用它：

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

工作示例。

希望能帮助到你。

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 插件。它将库文件添加到您的项目中，并允许您使用欧芹数据属性。