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