把手沒有渲染模板

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>