lundi 14 août 2017

Ember.js: binding to dynamic form inputs

I'm trying to figure out the proper way to collect "variable" personalized data on a product. The 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 a small form to collect that input would be fairly straightforward, except that personalized data can be different for each quantity. So if I order 2 of this item, it can have personalization:

FIRST ITEM
Text Line 1: Yarr
Text line 2: Matey

SECOND ITEM
Text Line 1: Swab
Text line 2: The poop deck

So basically the set of personalized fields needs to repeat for each quantity.

I've got the form built using a computed property:

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

with this template:


    Item 
    <ul>
        
            <li class="label"></li>
            <li class="field"></li>
        
    </ul>


And that shows a form like the image below. So that's great. But I just can't figure out exactly what to bind each form field to, and how. I imagine the "mut" and "get" helpers are the ticket, but I don't even know how to set up the object to save the data to.

Any help is appreciated!

enter image description here




Aucun commentaire:

Enregistrer un commentaire