Handlebar.js 使用 Underscore.js 动态表单输入的模板 - Zendesk 应用程序

Question

我正在尝试弄清楚如何使用 Underscore.js 在 Handlebar.js 模板上以动态创建的形式提交和捕获所有表单输入。这发生在 Zendesk 自定义应用程序中。

场景中有一个.hdbs 模板和app.js 文件。表单加载并正确显示。我正在使用的 underscore.js 函数确实可以看到表单输入，但只有 return 是第一个输入 value/key。它不 return 动态生成的复选框列表。

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

当前错误结果： [{"item":{"name":"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" };
});

Handlebar.js 使用 Underscore.js 动态表单输入的模板 - Zendesk 应用程序

Handlebar.js template with dynamic form inputs using Underscore.js - Zendesk App

javascript

handlebars.js

underscore.js

zendesk