bootstrap 3 for ember-easyForm

still lacks support of checkboxes: http://stackoverflow.com/questions/26444069/passing-handlebars-helper-to-another-helper-in-emberjs
This commit is contained in:
jelhan 2014-10-18 22:12:00 +02:00
parent 4c50679f42
commit d463704eb2
2 changed files with 91 additions and 0 deletions

View file

@ -0,0 +1,76 @@
/*
* make ember-easyForm support Bootstrap 3
* https://github.com/dockyard/ember-easyForm/wiki/Bootstrap-3-and-Ember-Data-With-Server-Side-Validations
*/
export default {
name: 'easyForm',
initialize: function() {
Ember.EasyForm.Input.reopen({
errorsChanged: function() {
this.set('hasFocusedOut', true);
this.showValidationError();
},
classNameBindings: ['wrapperConfig.inputClass', 'wrapperErrorClass'],
didInsertElement: function() {
this.addObserver('context.errors.' + this.property + '.@each', this, 'errorsChanged');
},
isCheckbox: function() {
if (this.get('inputOptionsValues.as') === 'checkbox') {
return true;
}
else {
return false;
}
}.property('inputOptionsValues'),
divWrapperClass: function() {
if (this.get('inputOptionsValues.as') === 'checkbox') {
return 'checkbox';
}
else {
return '';
}
}.property('inputOptionsValues')
});
Ember.EasyForm.Error.reopen({
errorText: function() {
return this.get('errors.firstObject');
}.property('errors.firstObject').cacheable(),
updateParentView: function() {
var parentView = this.get('parentView');
if(this.get('errors.length') > 0) {
parentView.set('wrapperErrorClass', 'has-error');
}else{
parentView.set('wrapperErrorClass', false);
}
}.observes('errors.firstObject')
});
Ember.EasyForm.Submit.reopen({
disabled: function() {
return this.get('formForModel.disableSubmit');
}.property('formForModel.disableSubmit')
});
//-- Bootstrap 3 Class Names --------------------------------------------
//-- https://github.com/dockyard/ember-easyForm/issues/47
Ember.TextSupport.reopen({
classNames: ['form-control']
});
// And add the same classes to Select inputs
Ember.Select.reopen({
classNames: ['form-control']
});
Ember.EasyForm.Config.registerWrapper('default', {
inputTemplate: 'form-fields/input',
labelClass: 'control-label',
inputClass: 'form-group',
buttonClass: 'btn btn-primary',
fieldErrorClass: 'has-error',
errorClass: 'help-block'
});
}
};

View file

@ -0,0 +1,15 @@
{{#unless view.isCheckbox}}
{{label-field propertyBinding="view.property" textBinding="view.label"}}
{{/unless}}
<div {{bind-attr class=view.divWrapperClass}}>
{{input-field propertyBinding='view.property' inputOptionsBinding='view.inputOptionsValues'}}
{{#if view.isCheckbox}}
{{label-field propertyBinding="view.property" textBinding="view.label"}}
{{/if}}
{{#if view.hint}}
{{hint-field propertyBinding="view.property" textBinding="view.hint"}}
{{/if}}
{{#if view.showError}}
{{error-field propertyBinding="view.property"}}
{{/if}}
</div>