使用 Handlebars.js 遍历名称列表

Question

我有一个 Bootstrap select 下拉菜单，我正在尝试使用 Handlebars JS 将所需的选项输出到我的 selection 中，但它们没有出现。我在这里阅读了一些示例，所以不确定是什么阻止了我的代码正确呈现，任何指针将不胜感激。

HTML:

  <select class="custom-select" id="inputGroupSelect01" onChange="takeSelectedSourceValue(this);">
  <option id="source-language" value="" selected disabled>Auto</option>
  
  <div id="myForm"></div>
  <script type="text/handlebar-template" id="selectPersonTemplate">
  {{#each people}}
    <option value="{{valueLang}}">{{htmlLang}}</option>
  {{/each}}
  </select>
  </script>

 <script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>

JS:

$(function () {
    // Define an array of people.
  var people = [
    { valueLang: 'DE', htmlLang: 'DE' },
    { valueLang: 'FR', htmlLang: 'FR' },
    { valueLang: 'IT', htmlLang: 'IT' },
    { valueLang: 'ES', htmlLang: 'ES' },
    { valueLang: 'SV', htmlLang: 'SV' },
    { valueLang: 'DA', htmlLang: 'DA' }
  ];
  
  // Get the text for the Handlebars template from the script element.
  var templateText = $("#selectPersonTemplate").html();
  
  // Compile the Handlebars template.
  var selectPersonTemplate = Handlebars.compile(templateText);
  
  // Evaluate the template with an array of people.
  var html = selectPersonTemplate({ people: people });
  
  // Take the HTML that was created with the Handlebars template and
  // set the HTML in the myForm div element.
  $("#myForm").html(html);
});

Answer 1

您的 HTML 有一些问题。

首先，您的结束 select 标签 </select> 在您的模板脚本标签内。

HTML 解析器忽略脚本标记中的内容，因为您已将脚本定义为 type="text/handlebar-template"。因此，解析器看不到 select 结束标记。

其次，<div> 元素不是 select、<select> 元素的有效子元素。

我不确定是否所有浏览器都以相同的方式处理这个无效标签，但我正在尝试使用 Chrome 并且 Chrome 似乎完全忽略了 <div id="myForm"></div> 时渲染。因此，没有要添加模板函数生成的 html 的元素。 html 值应附加到 <select>。

为了清楚起见，我建议从 <select> 中取出模板 <script> 标记。这将使 HTML 更易于阅读，并清楚地将 <select> 菜单与模板分开。

<select class="custom-select" id="inputGroupSelect01" onChange="takeSelectedSourceValue(this);">
  <option id="source-language" value="" selected disabled>Auto</option>
</select>
  
<script type="text/handlebar-template" id="selectPersonTemplate">
  {{#each people}}
    <option value="{{valueLang}}">{{htmlLang}}</option>
  {{/each}}
</script>

下一步，我们要确保附加 html到我们的#inputGroupSelect01元素。

// append the HTML to the #inputGroupSelect01 select element.
$("#inputGroupSelect01").append(html);

我创建了一个fiddle供您参考。

使用 Handlebars.js 遍历名称列表

Using Handlebars.js to iterate over a list of names

html

javascript

handlebars.js