Simple decorator for Ember-Eas

Ember EasyDecorator is a simple decorator that uses [Ember EasyForm] 1.

0.0.10

To create your decorator, extend from EmberEasyDecorator and setup elements using EED.element (type, options, html) function.

UserDecorator = EmberEasyDecorator.extend firstName: EED.element('input', {section: 'info', priority: 1}, {placeholder: 'First Name'}), lastName: EED.element('input', {section: 'info'}, {placeholder: 'First Name'}), profession: EED.element('select', {section: 'work'}, {prompt: 'Choose one'}), company: EED.element('input', {section: 'work'}, {placeholder: 'Company'}), works: EED.element('nested_attributes', {templateName: 'works', section: 'info'}), languages: EED.element('checkboxCollection', {collectionPath:'decorator.languagesCollection', #path to collection of elements to select from checkActiveMethod: 'languagesIsActive', #name of method that checks if checkbox is active checkCallback: 'checkLanguage', labelPath: 'labelPath'}, {}), #name of action to be called when checkbox is clicked professionCollection:(-> return ["doctor", "driver", "economist"] # You can implement any logic for select, and you have model in decorator => this.get('model') # If you want a relation collection add option: => relation: true ).property('model') languagesCollection: (-> return ['Ukrainian', 'Spanish', 'German'] }.property('model'), languagesIsActive: (item) -> return this.get('model.languages').contains(item) }, actions: removeWork: (work) -> # create your logic createWork: (work) -> # create your logic checkLanguage: (item,state) -> if (state) this.get('model.languages').pushObject(item) else this.get('model.languages').removeObject(item)

In your controller:

App.UsersController = Ember.Controller.extend({ decorator: UserDecorator.create({model: Ember.Object.create({'works': [{"name": "testing", "role": 'Manager'}]})}) }); Use in template

There are 2 helpers available: {{decorator-input}} and {{decorator-section}}. Pass the property name:

{{decorator-input 'firstName'}}

You can display all elements that have the same section property:

{{decorator-section 'work'}}

For checkbox collection:

{{decorator-input 'languages'}}

For nested attributes:

<script type='text/x-handlebars' data-template-name='works'> {{#each work in view.context.model.works}} {{input work.name label='Name'}} {{input work.role label='Role'}} {{/each}} <button {{action 'createWork' work on='click'}}>Add</button> </script>

Create a form:

{{#form-for controller.decorator.model}} <div id="firstNameInput">{{decorator-input 'firstName'}}</div> <div id="infoSection">{{decorator-section 'work'}}</div> {{/form-for}} License

[MIT] 2