把手不渲染模板

Question

I have been on this issue for more than a couple of hours now and I have no idea why it isn't working. It's a simple {{#each}} block. I will add I am new to Handlebars.js.

I thought maybe there was something wrong with my [vanilla] javascript so I translated the code to JQuery, but that did not help.

My Template:

<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>

Note : If I replace {{#each event}} with {{#each this}} then my template (as in only the HTML) is displayed without any data.

My 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;

• I tried removing the "this" keyword from {{this.city_name}} but that didn't do anything.
• I tried a simpler example to just get the array working (the line that is commented out under My Javascript) but that also wasn't working.
• I have tripled checked to see if maybe I had incorrect logic to insert HTML.
• I have looked at countless examples which I tried modeling but still nothing.

console.log(eventList) gives me:

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

I am not looking for a solution in JQuery. Thanks in advance :D

Edit 1 - Contents of an Object in the event Array

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

Answer 1

This should do it.

 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>