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

【问题标题】：Handlebar.js template with dynamic form inputs using Underscore.js - Zendesk AppHandlebar.js 模板与使用 Underscore.js 的动态表单输入 - Zendesk 应用程序
【发布时间】：2016-07-13 09:02:00
【问题描述】：

我试图弄清楚如何使用 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));

当前不正确的结果： [{"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}]

【问题讨论】：

{{this.state}} 将被“选中”或为空，具体取决于向模板发送数据的函数中的某些逻辑。

标签： javascript handlebars.js underscore.js zendesk

【解决方案1】：

结果比我最初意识到的要简单得多。目前此问题的解决方案已在https://jsfiddle.net/sde13q3m/3/ 更新。

本质上，在 return 语句中带有简单评估的 map 数组函数允许我收集控制器的所有表单字段和复选框。

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

【讨论】：