1

私は Ember JS だけでなく、JS 全般についても初心者です。私のアプリには、自由なテキスト入力または選択するオプションのリストの 2 つのタイプのいずれかを持つことができるフィールド オブジェクトがあります。私のフォームでは、タイプが「選択メニュー」のときに、選択のオプションを定義するために使用できる追加の入力ボックスのセットがポップアップするようにしようとしています。この 2 番目の内部フォームを動的にする必要があるため、select のオプションを 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