Ember easyForm array input using Zurb Foundation

array_input.coffee

Ember.EasyForm.ArrayInput = Ember.View.extend

  classNames: ["row"]

  templateName: 'easyForm/array_input'

  valueItems: (->
    @get('value').map (item) ->
      { value: item }
  ).property()

  valueItemsDidChange: (->
    @set('value', @get('valueItems').getEach('value'))
  ).observes('valueItems.@each.value')

  actions:
    addItem: ->
      @get('valueItems').pushObject({ value: '' })
    removeItem: (item) ->
      @get('valueItems').removeObject(item)

Ember.EasyForm.Config.registerInputType('array', Ember.EasyForm.ArrayInput)

array_input.hbs

{{#each item in view.valueItems}}
  <div class="large-11 columns">
    {{ input-field item.value }}
  </div>
  <div class="large-1 columns">
    <a {{ action "removeItem" item class="postfix" target='view' }}>
      &times;
    </a>
  </div>
{{/each}}
<div class="large-12 columns">
  <a {{ action "addItem" target='view' }}>
    <i class="icon-plus"></i>
  </a>
</div>