Как проверить список выбора Ember Select?

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

Я достиг этого очень похоже, расширив 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 включить «необходимый» и «петрушка-сообщения об ошибке» атрибуты, поэтому мы могут использовать их в наших привязках.

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 построить свой уголек приложение.

Текущая настройка во время этого поста:

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