Question

我使用下面的代码验证TextField是否为空或0，然后为其添加错误类以为其提供背景颜色。

我有另一个隐藏的文本字段，其值基于Ember.Select中选择的值设置，如果未选择值，如何最好为选择添加/更改错误类？

App.NumField = Ember.TextField.extend({
  required: function() {
    var valid = /^[1-9][0-9]*$/.test(this.get('value'));
    return valid
  }.property('value'),
  classNameBindings: 'required:notreq:req'
});

{{view App.NumField valueBinding="type"}}
{{view Ember.Select contentBinding="App.Type" optionValuePath="content.id" optionLabelPath="content.type" valueBinding="type" prompt="Please select a type"}}

感谢您的任何建议。

Answer 1

如果选择选择为null或未定义，我通过扩展Ember.Select并根据结果绑定有效或无效的类，以非常类似的方式实现了这一点。我不确定这是否是最佳解决方案，如果您知道更好的方法，请告诉我。这很快，对我来说效果很好。

App.SelectValidate = Ember.Select.extend({
    validate: function() {
        var chosen = this.selection,
            valid;
        if (chosen === null || chosen === undefined) {
            valid = false;
        } else {
            valid = true;
        }
        return valid
    }.property('value'),
    classNameBindings: 'validate:valid:invalid'
});

Answer 2

我们使用Parsley.js（http://parsleyjs.org/）来验证我们的表单，结合这个，我们只是扩展我们的Ember.Select类以包含“required”和“parsley-error-message”属性，所以我们可以在我们的绑定中使用它们。

Ember.Select.reopen({
    attributeBindings: ['required', 'data-error-message']
});

{{view Ember.Select
contentBinding="[Your Val]"
optionValuePath="[Your Val]"
optionLabelPath="[Your Val]"
valueBinding="[Your Val]"
prompt="Choose Option"
required="required"
data-error-message="Please select an option."}}

通过查看parsleyjs.org上的文档，您可以看到如何扩展控件以处理更多的欧芹验证方案，这是一个很好的库。

Answer 3

如果您正在努力将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',
        'required',
        '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',
        'required',
        '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: -------------------------------

如何验证Ember选择列表？

3 个答案: