From 89e6ff70aa5554d6864aebf18fb51f65956e6779 Mon Sep 17 00:00:00 2001 From: Duncan Graham Walker Date: Sat, 14 Feb 2015 12:59:40 -0500 Subject: [PATCH] Removed Easy form precompiled templates for compatibility with handlebars 2.0 --- README.md | 41 ++++- addon/initializers/easy-form-extensions.js | 24 +-- app/templates/easy-form/error.hbs | 1 + app/templates/easy-form/hint.hbs | 1 + app/templates/easy-form/input-controls.hbs | 15 ++ app/templates/easy-form/input.hbs | 2 +- app/templates/easy-form/label.hbs | 1 + package.json | 4 +- vendor/ember-easy-form-extensions.js | 104 ------------- vendor/ember-easy-form.js | 165 +-------------------- 10 files changed, 76 insertions(+), 282 deletions(-) create mode 100644 app/templates/easy-form/error.hbs create mode 100644 app/templates/easy-form/hint.hbs create mode 100644 app/templates/easy-form/input-controls.hbs create mode 100644 app/templates/easy-form/label.hbs delete mode 100644 vendor/ember-easy-form-extensions.js diff --git a/README.md b/README.md index b13986f..18286ae 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,13 @@ export default Ember.View.extend( return new Ember.RSVP.Promise(function(resolve, reject) { // Do something unusual here, then resolve. - resolve(); + this.showCoolAnimation(); + + if (!this.get('someViewProperty')) { + reject(); // Resets the form submission state + } else { + resolve(); // Will call the controller method + } }); } @@ -167,6 +173,31 @@ export default Ember.ObjectController.extend( The saving mixin will handle all internals including the state of the form (submitted or not submitted) and running the validations - you just have to specify what you want to happen when validations have been run. +You can also add a destroy method: + +```js +// app-name/controllers/post/edit.js + +import Ember from 'ember'; +import Saving from 'ember-easy-form-extensions/mixins/controllers/saving'; + +export default Ember.ObjectController.extend( + Saving, { + + destroy: function() { + var _this = this; + + // Runs when the user clicks on the destroy submission component after the view has handled the destroy action and checked to see if you've specified a destroyHandler in the view + _this.get('content').destroyRecord().then(function() { + _this.transitionToRoute('posts'); + }); + } + +}); +``` + +Please note, this is best used when you're deleting a persisted model, not a new one - in the latter situation consider using [the delete record mixin](#delete-record). + The `Saving` mixin also provides support for automatically revalidating your model when you're using a computed property with `ember-validations`. Just add the computed property names to the `revalidateFor` array: ```js @@ -190,7 +221,7 @@ export default Ember.ObjectController.extend( } required: function() { - return somethingElse && !anotherThing; + return this.get('somethingElse') && !this.get('anotherThing'); }.property('somethingElse', 'anotherThing'), cancel: function() {}, @@ -201,7 +232,7 @@ export default Ember.ObjectController.extend( If your routes follow a RESTful naming convention, you can take advantage of two new **boolean** properties on the controller: - `new` - True if the route is for a new model (e.g. `this.route('new')`;) -- 'editing' - True if the route is for editing a model (e.g. `this.route('edit');`) +- `editing` - True if the route is for editing a model (e.g. `this.route('edit');`) You can use these to set the button text, for example: @@ -322,7 +353,7 @@ To customize the template, just override the path at `app-name/templates/compone The loading spinner component replaces the buttons in your submission components when the form has been submitted. -If you already have a spinner component simply export it at the correct path: +If you already have a spinner component simply export it at the correct path to immediately use your component: ```js // app-name/components/loading-spinner.js @@ -340,6 +371,8 @@ Alternatively, just add your spinner to the template: ``` +If you really don't want to use the `{{loading-spinner}}` component anywhere in your app, edit the submission component templates as described in [template customization](#template-customization). + ## Helpers `ember-easy-form-extensions` comes prepackaged with **scopeless** block template helpers. These helpers make it really easy to code semantic forms and keep your code maintainable. diff --git a/addon/initializers/easy-form-extensions.js b/addon/initializers/easy-form-extensions.js index 94e5212..8c14ea4 100644 --- a/addon/initializers/easy-form-extensions.js +++ b/addon/initializers/easy-form-extensions.js @@ -7,7 +7,6 @@ import form from 'ember-easy-form-extensions/helpers/form'; import formControls from 'ember-easy-form-extensions/helpers/form-controls'; export function initialize(/* container, app */) { - var EasyForm = Ember.EasyForm; var Handlebars = Ember.Handlebars; var run = Ember.run; @@ -20,27 +19,34 @@ export function initialize(/* container, app */) { Default option overrides */ - EasyForm.Config.registerWrapper('default', { + Ember.EasyForm.Config.registerWrapper('default', { errorClass: 'error', + errorTemplate: 'easy-form/error', + formClass: 'form', fieldErrorClass: 'control-error', + hintClass: 'hint', + hintTemplate: 'easy-form/hint', + inputClass: 'control', inputTemplate: 'easy-form/input', + labelClass: 'label', + labelTemplate: 'easy-form/label' }); - EasyForm.Checkbox.reopen({ + Ember.EasyForm.Checkbox.reopen({ classNames: ['input-checkbox'], }); - EasyForm.TextField.reopen({ + Ember.EasyForm.TextField.reopen({ attributeBindings: ['dataTest:data-test'], classNames: ['input'], dataTest: Ember.computed.alias('parentView.dataTest'), }); - EasyForm.TextArea.reopen({ + Ember.EasyForm.TextArea.reopen({ attributeBindings: ['dataTest:data-test'], classNames: ['input-textarea'], dataTest: Ember.computed.alias('parentView.dataTest'), @@ -55,7 +61,7 @@ export function initialize(/* container, app */) { If a label is specified on the input, this will be used in place of the property name. */ - EasyForm.Error.reopen({ + Ember.EasyForm.Error.reopen({ errorText: function() { var propertyName = this.get('parentView.label') || this.get('property') || ''; @@ -67,10 +73,8 @@ export function initialize(/* container, app */) { Temporarily binds a success class the the control when the input goes from invalid to valid. */ - EasyForm.Input.reopen({ - classNameBindings: ['showValidity:input_with_validity'], - datepickerInputId: insert('elementId', 'input-{{value}}'), - isDatepicker: Ember.computed.equal('as', 'date'), + Ember.EasyForm.Input.reopen({ + classNameBindings: ['showValidity:control-valid'], showValidity: false, setInvalidToValid: function() { diff --git a/app/templates/easy-form/error.hbs b/app/templates/easy-form/error.hbs new file mode 100644 index 0000000..d5d3082 --- /dev/null +++ b/app/templates/easy-form/error.hbs @@ -0,0 +1 @@ +{{view.errorText}} diff --git a/app/templates/easy-form/hint.hbs b/app/templates/easy-form/hint.hbs new file mode 100644 index 0000000..ba2337b --- /dev/null +++ b/app/templates/easy-form/hint.hbs @@ -0,0 +1 @@ +{{view.hintText}} diff --git a/app/templates/easy-form/input-controls.hbs b/app/templates/easy-form/input-controls.hbs new file mode 100644 index 0000000..7b7d540 --- /dev/null +++ b/app/templates/easy-form/input-controls.hbs @@ -0,0 +1,15 @@ +{{input-field + propertyBinding='view.property' + inputOptionsBinding='view.inputOptionsValues' +}} + +{{#if view.showError}} + {{error-field propertyBinding='view.property'}} +{{/if}} + +{{#if view.hint}} + {{hint-field + propertyBinding='view.property' + textBinding='view.hint' + }} +{{/if}} diff --git a/app/templates/easy-form/input.hbs b/app/templates/easy-form/input.hbs index f20de9d..d222120 100644 --- a/app/templates/easy-form/input.hbs +++ b/app/templates/easy-form/input.hbs @@ -1,5 +1,5 @@ {{label-field propertyBinding='view.property' textBinding='view.label'}}
- {{partial 'easyForm/inputControls'}} + {{partial 'easy-form/input-controls'}}
diff --git a/app/templates/easy-form/label.hbs b/app/templates/easy-form/label.hbs new file mode 100644 index 0000000..f87d1de --- /dev/null +++ b/app/templates/easy-form/label.hbs @@ -0,0 +1 @@ +{{view.labelText}} diff --git a/package.json b/package.json index d9fb7cf..159f830 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ember-easy-form-extensions", - "version": "0.1.0", - "description": "Extends Ember EasyForm into the view and controller layers of your Ember CLI app to provide easy event and action handling using mixins and components", + "version": "0.1.1", + "description": "Extends Ember EasyForm into the view and controller layers of your Ember CLI app to provide easy event and action handling using mixins and components.", "directories": { "doc": "doc", "test": "tests" diff --git a/vendor/ember-easy-form-extensions.js b/vendor/ember-easy-form-extensions.js deleted file mode 100644 index 9b84ce9..0000000 --- a/vendor/ember-easy-form-extensions.js +++ /dev/null @@ -1,104 +0,0 @@ -Ember.EasyForm.Config.registerTemplate('easyForm/input', Ember.Handlebars.compile( - '{{label-field propertyBinding="view.property" textBinding="view.label"}}' + - '
' + - '{{#if view.isDatepicker}}' + - '{{input id=view.datepickerInputId class="datepicker input"}}' + - '{{/if}}' + - '{{partial "easyForm/inputControls"}}' + - '
' -)); - -/** -Default option overrides -*/ - -Ember.EasyForm.Config.registerWrapper('default', { - errorClass: 'error', - formClass: 'form', - fieldErrorClass: 'input_with_errors', - hintClass: 'hint', - inputClass: 'control', - labelClass: 'label', -}); - -Ember.EasyForm.Checkbox.reopen({ - classNames: ['input-checkbox'], -}); - -Ember.EasyForm.TextField.reopen({ - attributeBindings: ['dataTest:data-test'], - classNames: ['input'], - dataTest: Ember.computed.alias('parentView.dataTest'), -}); - -Ember.EasyForm.TextArea.reopen({ - attributeBindings: ['dataTest:data-test'], - classNames: ['input-textarea'], - dataTest: Ember.computed.alias('parentView.dataTest'), -}); - -/** -Overrides the original `errorText` property to add the property name to the error message. For example: - -can't be blank --> Name can't be blank -must be a number --> Age must be a number - -If a label is specified on the input, this will be used in place of the property name. -*/ - -Ember.EasyForm.Error.reopen({ - errorText: function() { - var propertyName = this.get('parentView.label') || this.get('property') || ''; - - return Ember.EasyForm.humanize(propertyName) + ' ' + this.get('errors.firstObject'); - }.property('errors.[]', 'value'), -}); - -/** -Temporarily binds a success class the the control when the input goes from invalid to valid. -*/ - -Ember.EasyForm.Input.reopen({ - classNameBindings: ['showValidity:input_with_validity'], - datepickerInputId: insert('elementId', 'input-{{value}}'), - isDatepicker: Em.computed.equal('as', 'date'), - showValidity: false, - - setInvalidToValid: function() { - // If we go from error to no error - if (!this.get('showError') && this.get('canShowValidationError')) { - Ember.run.debounce(this, function() { - var hasAnError = this.get('formForModel.errors.' + this.get('property') + '.length'); - - if (!hasAnError && !this.get('isDestroying')) { - this.set('showValidity', true); - - Ember.run.later(this, function() { - if (!this.get('isDestroying')) { - this.set('showValidity', false); - } - }, 2000); - } - }, 50); - } - }.observes('showError'), - - /** - An override of easyForm's default `focusOut` method to ensure validations are not shown when the user clicks cancel. - - @method focusOut - */ - - focusOut: function() { - // Double run loop so `cancelClick` is set properly - Ember.run.next(this, function() { - Ember.run.next(this, function() { - if (!this.get('parentView.cancelClicked') && !this.get('isDestroying')) { - this.set('hasFocusedOut', true); - this.showValidationError(); - } - }); - }); - }, - -}); diff --git a/vendor/ember-easy-form.js b/vendor/ember-easy-form.js index ee3da73..4ec8970 100644 --- a/vendor/ember-easy-form.js +++ b/vendor/ember-easy-form.js @@ -1,3 +1,5 @@ +// Changed input helper (search for CHANGED) and removed precompiiled templates + // ========================================================================== // Project: Ember EasyForm // Copyright: Copyright 2013 DockYard, LLC. and contributors. @@ -141,7 +143,8 @@ Ember.Handlebars.registerHelper('input-field', function(property, options) { var modelPropertyPath = function(property) { if(!property) { return null; } - var startsWithKeyword = !!options.data.keywords[property.split('.')[0]]; + // CHANGED + var startsWithKeyword = options.data.keywords && !!options.data.keywords[property.split('.')[0]]; if (startsWithKeyword) { return property; @@ -529,36 +532,6 @@ Ember.EasyForm.Submit = Ember.EasyForm.BaseView.extend({ })(); - -(function() { -Ember.EasyForm.Button = Ember.EasyForm.BaseView.extend({ - tagName: 'button', - template: Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) { -this.compilerInfo = [4,'>= 1.0.0']; -helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; - var hashTypes, hashContexts, escapeExpression=this.escapeExpression; - - - hashTypes = {}; - hashContexts = {}; - data.buffer.push(escapeExpression(helpers._triageMustache.call(depth0, "text", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}))); - -}), - attributeBindings: ['type', 'disabled'], - type: 'submit', - disabled: function() { - return !this.get('formForModel.isValid'); - }.property('formForModel.isValid'), - init: function() { - this._super(); - this.set('formForModel.text', this.value); - } -}); - -})(); - - - (function() { Ember.EasyForm.TextArea = Ember.TextArea.extend(); @@ -578,136 +551,6 @@ Ember.EasyForm.TextField = Ember.TextField.extend(); })(); - -(function() { -Ember.EasyForm.Config.registerTemplate('easyForm/error', Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) { -this.compilerInfo = [4,'>= 1.0.0']; -helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; - var hashTypes, hashContexts, escapeExpression=this.escapeExpression; - - - hashTypes = {}; - hashContexts = {}; - data.buffer.push(escapeExpression(helpers._triageMustache.call(depth0, "view.errorText", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}))); - -})); - -})(); - - - -(function() { -Ember.EasyForm.Config.registerTemplate('easyForm/hint', Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) { -this.compilerInfo = [4,'>= 1.0.0']; -helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; - var hashTypes, hashContexts, escapeExpression=this.escapeExpression; - - - hashTypes = {}; - hashContexts = {}; - data.buffer.push(escapeExpression(helpers._triageMustache.call(depth0, "view.hintText", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}))); - -})); - -})(); - - - -(function() { -Ember.EasyForm.Config.registerTemplate('easyForm/input', Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) { -this.compilerInfo = [4,'>= 1.0.0']; -helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; - var buffer = '', stack1, hashContexts, hashTypes, options, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; - - - hashContexts = {'propertyBinding': depth0,'textBinding': depth0}; - hashTypes = {'propertyBinding': "STRING",'textBinding': "STRING"}; - options = {hash:{ - 'propertyBinding': ("view.property"), - 'textBinding': ("view.label") - },contexts:[],types:[],hashContexts:hashContexts,hashTypes:hashTypes,data:data}; - data.buffer.push(escapeExpression(((stack1 = helpers['label-field'] || depth0['label-field']),stack1 ? stack1.call(depth0, options) : helperMissing.call(depth0, "label-field", options)))); - hashTypes = {}; - hashContexts = {}; - options = {hash:{},contexts:[depth0],types:["STRING"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}; - data.buffer.push(escapeExpression(((stack1 = helpers.partial || depth0.partial),stack1 ? stack1.call(depth0, "easyForm/inputControls", options) : helperMissing.call(depth0, "partial", "easyForm/inputControls", options)))); - return buffer; - -})); - -})(); - - - -(function() { -Ember.EasyForm.Config.registerTemplate('easyForm/inputControls', Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) { -this.compilerInfo = [4,'>= 1.0.0']; -helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; - var buffer = '', stack1, stack2, hashContexts, hashTypes, options, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, self=this; - -function program1(depth0,data) { - - var stack1, hashContexts, hashTypes, options; - hashContexts = {'propertyBinding': depth0}; - hashTypes = {'propertyBinding': "STRING"}; - options = {hash:{ - 'propertyBinding': ("view.property") - },contexts:[],types:[],hashContexts:hashContexts,hashTypes:hashTypes,data:data}; - data.buffer.push(escapeExpression(((stack1 = helpers['error-field'] || depth0['error-field']),stack1 ? stack1.call(depth0, options) : helperMissing.call(depth0, "error-field", options)))); - } - -function program3(depth0,data) { - - var stack1, hashContexts, hashTypes, options; - hashContexts = {'propertyBinding': depth0,'textBinding': depth0}; - hashTypes = {'propertyBinding': "STRING",'textBinding': "STRING"}; - options = {hash:{ - 'propertyBinding': ("view.property"), - 'textBinding': ("view.hint") - },contexts:[],types:[],hashContexts:hashContexts,hashTypes:hashTypes,data:data}; - data.buffer.push(escapeExpression(((stack1 = helpers['hint-field'] || depth0['hint-field']),stack1 ? stack1.call(depth0, options) : helperMissing.call(depth0, "hint-field", options)))); - } - - hashContexts = {'propertyBinding': depth0,'inputOptionsBinding': depth0}; - hashTypes = {'propertyBinding': "STRING",'inputOptionsBinding': "STRING"}; - options = {hash:{ - 'propertyBinding': ("view.property"), - 'inputOptionsBinding': ("view.inputOptionsValues") - },contexts:[],types:[],hashContexts:hashContexts,hashTypes:hashTypes,data:data}; - data.buffer.push(escapeExpression(((stack1 = helpers['input-field'] || depth0['input-field']),stack1 ? stack1.call(depth0, options) : helperMissing.call(depth0, "input-field", options)))); - hashTypes = {}; - hashContexts = {}; - stack2 = helpers['if'].call(depth0, "view.showError", {hash:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}); - if(stack2 || stack2 === 0) { data.buffer.push(stack2); } - hashTypes = {}; - hashContexts = {}; - stack2 = helpers['if'].call(depth0, "view.hint", {hash:{},inverse:self.noop,fn:self.program(3, program3, data),contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}); - if(stack2 || stack2 === 0) { data.buffer.push(stack2); } - return buffer; - -})); - -})(); - - - -(function() { -Ember.EasyForm.Config.registerTemplate('easyForm/label', Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) { -this.compilerInfo = [4,'>= 1.0.0']; -helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; - var hashTypes, hashContexts, escapeExpression=this.escapeExpression; - - - hashTypes = {}; - hashContexts = {}; - data.buffer.push(escapeExpression(helpers._triageMustache.call(depth0, "view.labelText", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}))); - -})); - -})(); - - - (function() { })();