把手没有渲染模板

Question

我已经在这个问题上超过了几个小时了，我不知道为什么它不工作。这是一个简单的{{#each}}块。我将加入我对Handlebars.js的新内容。

我想也许我的[香草] 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事件}}与{{#each这}}然后我的模板（如仅在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}}删除 “这个” 关键词，但没有做任何事情。
• 我尝试了一个简单的例子来获取数组的工作方式（在我的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>