javascript - Handlebars 不渲染模板

Question

我已经解决这个问题几个小时了，但我不知道为什么它不起作用。这是一个简单的 {{#each}} block 。我将添加我是 Handlebars.js 的新手。

我认为我的 [vanilla] javascript 可能有问题，所以我将代码翻译为 JQuery，但这没有帮助。

我的模板:

<div class="eventListContainer" id="handlebarsEntryPoint">
</div>

<script id="eventList-template" type="text/x-handlebars-template">
    {{#each event}}
    <div class="evenEvent eventContent">
        <div class="eventThumbnails leftContent">
            EX1: {{this.city_name}}
        </div>
        <div class="eventInformation middleContent">
            EX2: {{this.id}}
        </div>
        <div class="eventGoogleMap rightContent">
            EX3: {{this.owner}}
        </div>
    </div>
    <hr>
    {{/each}}
</script>

注意:如果我将 {{#each event}} 替换为 {{#each this}}，则我的模板(仅在 HTML 中)显示没有任何数据。

我的 JavaScript:

eventList = response.events;
console.log(eventList);

var source = document.getElementById('eventList-template').innerHTML;
var template = Handlebars.compile(source);
var compiledHTML = template(eventList);
// compiledHTML = template({event: ['56','789','91011']});
var entryPoint = document.getElementById('handlebarsEntryPoint');
entryPoint.innerHTML = compiledHTML;

• 我尝试从 {{this.city_name}} 中删除“this”关键字，但没有任何效果。
• 我尝试了一个更简单的示例来让数组正常工作(在“我的 Javascript”下注释掉的行)，但这也不起作用。
• 我进行了三次检查，看看插入 HTML 的逻辑是否不正确。
• 我看过无数的例子，我尝试过建模，但仍然一无所获。

console.log(eventList) 给我:

Object {event: Array[5]}
  event: Array[5]
    0: Object
    1: Object
    2: Object
    3: Object
    4: Object
    length: 5
    __proto__: Array[0]
  __proto__: Object

我不是在 JQuery 中寻找解决方案。提前致谢:D

编辑 1 - 事件数组中对象的内容

https://sdjs.slack.com/files/jacome09/F2BNNPDRN/events_object.js

Answer 1

这应该可以。

var source = document.getElementById('eventList-template').innerHTML;
var template = Handlebars.compile(source);
var compiledHTML = template({event: [{city_name: 'KC',id:'56',owner:'MO'},{city_name: 'SF',id:'1000',owner:'CA'}]});
var entryPoint = document.getElementById('handlebarsEntryPoint');
entryPoint.innerHTML = compiledHTML;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<div class="eventListContainer" id="handlebarsEntryPoint">
</div>

<script id="eventList-template" type="text/x-handlebars-template">
    {{#each event as |ev|}}
    <div class="evenEvent eventContent">
        <div class="eventThumbnails leftContent">
            EX1: {{ev.city_name}}
        </div>
        <div class="eventInformation middleContent">
            EX2: {{ev.id}}
        </div>
        <div class="eventGoogleMap rightContent">
            EX3: {{ev.owner}}
        </div>
    </div>
    <hr>
    {{/each}}
</script>