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'}]})})
});
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}}
[MIT] 2