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 this}}替换{{#each event}}，那么我的模板（仅在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>

把手没有渲染模板

1 个答案: