Ember.js: binding to dynamic form inputs -

i'm trying figure out proper way collect "variable" personalized data on product. product has these personalized fields defined:

"personalization": [   {     "id": 234,      "maxlength": "128",      "prompt": "text line 1 (12 character limit)",      "required": "1"   },    {     "id": 235,      "maxlength": "128",      "prompt": "text line 2 (12 character limit)",      "required": "1"   } ], 

building small form collect input straightforward, except personalized data can different each quantity. if order 2 of item, can have personalization:

first item text line 1: yarr text line 2: matey  second item text line 1: swab text line 2: poop deck 

so set of personalized fields needs repeat each quantity.

i've got form built using computed property:

personalizedform: computed('quantity', function() {     let q = get(this, 'quantity');     let persform = [];     (let = 0; < q; i++) {         persform.push(get(this, 'model.personalization'));     }      return persform; }), 

with template:

{{#each personalizedform |quantity index|}}     item {{add index 1}}     <ul>         {{#each quantity |set|}}             <li class="label">{{set.prompt}}</li>             <li class="field">{{input value=????}}</li>         {{/each}}     </ul> {{/each}} 

and shows form image below. that's great. can't figure out bind each form field to, , how. imagine "mut" , "get" helpers ticket, don't know how set object save data to.

any appreciated!

i'm not sur understand want find way value dynamic form ?

you can try serialize form. have put balise form before , after each

<form id="my_form">  {{#each personalizedform |quantity|}}   item {{add index 1}}   <ul>     {{#each quantity |set|}}         <li class="label">{{set.prompt}}</li>         <li class="field">{{input value=????}}</li>     {{/each}}   </ul>  {{/each}} <form> 

and in component .js can them doing const formarray = ember.$('#my_form').serializearray(); array or const form = ember.$('#my_form').serialize(); object