Ember EasyDecorator

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

Version

0.0.10

Decorator Setup

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