1

我是 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>

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

4

0 回答 0