车把不呈现模板

Question

我在这个问题上已经讨论了几个多小时了，但我不知道为什么它不起作用。这是一个简单的 {{#each}} 块。我将添加我是 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>