1

I am new to Ember JS and even JS in general. My app has a field object which can have one of two types: either free text entry or a list of options to select from. In my form I am trying to make it so that when the type is 'Select Menu' a set of extra input boxes will pop up which can be used to define the options for select. I need this second inner-form to be dynamic so it can accept 2 or 3 or 10 or however many options for select.

My initial thought on how to accomplish this was with a partial that would be rendered depending on the type.

How do I make a form for the embedded options? How do I make it so the user can enter as many options as they want?

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>

I really have no idea what the selectOptions partial I'm rendering should look like

Brian H
  • 1,033
  • 2
  • 9
  • 28

0 Answers0