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:
parent
4c50679f42
commit
d463704eb2
2 changed files with 91 additions and 0 deletions
76
app/initializers/ember-easyForm.js
Normal file
76
app/initializers/ember-easyForm.js
Normal 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'
|
||||
});
|
||||
}
|
||||
};
|
15
app/templates/form-fields/input.hbs
Normal file
15
app/templates/form-fields/input.hbs
Normal 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>
|
Loading…
Reference in a new issue