把手没有渲染模板
我已经在这个问题上超过了几个小时了,我不知道为什么它不工作。这是一个简单的{{#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
这应做到内容。
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>
我最终把客户端的Handlebars移动到了服务器端,老实说我不知道为什么我使用了两者,但是,我刚刚开始工作。仍然存在关于为客户端提供预编译模板的问题,任何人都可以阅读,我会很乐意解释这些。简而言之,我将这些代码移植到了我的服务器上。@Steve - 感谢您的输入! – Papermate
由于上面的代码确实解决了问题中定义的问题,因此可以考虑将其标记为正确。 – Steve
我想我误解了你。我写道,“我移植了**这个**代码”,但我指的是我原来的代码的帖子。我从未测试过你的代码。另外,我可以通过[tryhandlebars](http://tryhandlebarsjs.com/)上的浏览器获得不同的工作示例,甚至该代码在我的应用程序中也不起作用。所以我真的不知道问题是什么。 – Papermate
您是否尝试过 “event.something” 而不是 “this.something”? – Aethyn
@aethyn不,我没有。我现在只是尝试过,但它没有做任何事 – Papermate
你可以发布数组中的对象的内容吗? – JustH