在ember中嵌入对象数组的表单

时间:2014-04-14 18:43:04

标签: forms ember.js embedded-object

我是Ember JS的新手,甚至是JS。我的应用程序有一个字段对象,可以有两种类型之一:自由文本条目或可供选择的选项列表。在我的表单中,我试图使其成为当类型为'选择菜单'将弹出一组额外的输入框,可用于定义选项的选项。我需要第二个内部形式是动态的,所以它可以接受2或3或10或多个选项。

我最初的想法是如何实现这一点,部分将根据类型进行渲染。

如何为嵌入选项制作表单?如何制作,以便用户可以输入任意数量的选项?

App.Field = DS.Model.extend Ember.Validations.Mixin,
  title: DS.attr 'string'
  type: DS.attr 'string'
  select_options: DS.hasMany 'select_option', {embedded: true}

  validations:
    title: presence: true
    type: presence: true

-

App.SelectOption = DS.Model.extend Ember.Validations.Mixin,
  title: DS.attr 'string'

  validations:
    title: presence: true

-

App.PmSetupFieldsNewController = Ember.ObjectController.extend
  types: ['Text Entry', 'Select Menu']

  actions:
    submit: ->
      @get('model').save().then(@onCreate.bind(@), @onFail.bind(@))

  onCreate: ->
    @transitionToRoute('pm.setup.fields.index')

  onFail: ->
    console.log 'failure'

  isSelect: Ember.computed 'type', ->
    @get('type') == 'Select Menu'

-

<div class="col-md-8">
  <h4>Field</h4>
  {{#form-for this wrapper="bootstrap-horizontal"}}
    {{input title}}
    {{#input type}}
      {{label-field type class="control-label col-md-2"}}
      <div class="col-md-6">
        {{view Ember.Select content=types
                            value=type
                            classNames="form-control"
                            prompt="Select a Type"}}
        {{#if view.showError}}
          {{error-field status}}
        {{/if}}
      </div>
    {{/input}}

    {{#if isSelect }}
      {{render "pm.setup.fields.selectOptions"}}
    {{/if }}

    <div class="form-group">
      <div class="col-md-10 col-md-offset-2">
        {{submit "Save changes" class="btn btn-primary"}}
      </div>
    </div>
  {{/form-for}}
</div>

我真的不知道我的渲染部分应该是什么样的

0 个答案:

没有答案