Handlebar.js Vorlage mit dynamischen Formulareingaben unter Verwendung von Underscore.js - Zendesk App

Question

Ich versuche herauszufinden, wie alle Formulareingaben in einem dynamisch erstellten Formular in einer Handlebar.js Vorlage unter Verwendung von Underscore.js eingereicht und erfasst werden. Dies geschieht in einer benutzerdefinierten Zendesk-App.

Es gibt eine .hdbs-Vorlage und eine app.js-Datei im Szenario. Das Formular wird geladen und korrekt angezeigt. Die von mir verwendete Funktion underscore.js sieht die Formulareingabe, gibt aber nur den ersten Eingabewert/Schlüssel zurück. Die dynamisch generierte Liste der Kontrollkästchen wird nicht zurückgegeben.

.hdbs:

<div class="row-fluid"> 
<p> 

</p> 
    <form id="updateChecklist"> 
    {{listname}}: &nbsp;&nbsp;{{complete}}/{{total}} 
    <input type="hidden" name="listid" value="{{listid}}"> 
    <br/> 
    <ul> 
    {{#each tasks}}​ 
    <li class={{fontcolor}}> 
    <input type="checkbox" name="{{this.id}}" id="{{this.id}}" {{ this.state }}> {{this.name}} 
    </li>​ 
    {{/each}} 

    </ul> 
    <button class="btn btn-inverse btn-large" id="update" type="button">Update Tasks</button> 
    </form> 
</div> 

app.js:

events: { 
     'click #update'   : 'updateSingleChecklist' 
    }, 

...

updateSingleChecklist: function(event) { 

    var serializedArray = this.$("#updateChecklist").serializeArray(); 

    var itemIdsArray = _.map(serializedArray, function(item, key){ 
     return {item, key}; 
    }); 

    console.log(JSON.stringify(itemIdsArray)); 

Aktuelle falsches Ergebnis: [{ "item": { "name" : "listid", "Wert": "56eafe771e9824def46a7d7d"}, "Schlüssel": 0}]

Was ich suche ist ein Array der Formulareingaben, einschließlich der nicht markierten Kontrollkästchen.

ich brauche:

[{"item":{"name":"listid","value":"56eafe771e9824def46a7d7d"}, 
{"name":"checkbox1","value":"56eafe771e9824def46a7d8c", "checked":"0"}, 
{"name":"checkbox2","value":"24eafe771e9824def46a7c6d", "checked":"1"}, 
{"name":"checkbox3","value":"71eafe771e9824def46a3r5g", "checked":"0"}, 
... 
"key":0}] 

Answer 1

Es stellte sich viel einfacher aus als ich anfangs realisiert. Die Lösung für dieses Problem ist jetzt unter https://jsfiddle.net/sde13q3m/3/ aktualisiert.

Im Wesentlichen erlaubt mir die Map-Array-Funktion mit einer einfachen Auswertung in der return-Anweisung, alle Formularfelder und Checkboxen für den Controller zu sammeln.