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
Comments
Post a Comment