Underscore.jsを使用した動的フォーム入力を伴うHandlebar.jsテンプレート - Zendesk App

Question

Underscore.jsを使用して、動的に作成されたフォームのすべてのフォーム入力をHandlebar.jsテンプレートで送信および取得する方法を理解しようとしています。これはZendeskのカスタムアプリで発生しています。

シナリオに.hdbsテンプレートとapp.jsファイルがあります。フォームが正しく読み込まれて表示されます。私が使用しているunderscore.js関数はフォーム入力を見ていますが、最初の入力値/キーのみを返します。動的に生成されるチェックボックスのリストは返されません。

.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)); 

現在正しくない結果： [{ "項目"：{ "名前" ： "listid"、 "value"： "56eafe771e9824def46a7d7d"}、 "key"：0}]

私が探しているのは、未チェックのチェックボックスを含むフォーム入力の配列です。

私が必要：

[{"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

それは私が最初に実現よりもずっと簡単であることが判明しました。現在、この問題の解決策はhttps://jsfiddle.net/sde13q3m/3/に更新されています。

本質的に、returnステートメントで単純な評価を行うマップ配列関数は、コントローラのすべてのフォームフィールドとチェックボックスを収集することができました。

var serialized = this.$('#myform input').map(function() { 
return { name: this.name, id: this.id, value: this.checked ? "checked" :   "false" }; 
});