我正在尝试使用 Handlebars 为显示本地 HTML 文件的信息亭单元供电。这些文件使用 Javascript 来获取远程内容,并且 Handlebars 控制模板/输出。
我想要做的是将 Handlebars 模板保存在它们自己的目录中,并在与按钮(链接)交互时 - 将这些模板注入页面,然后用 AJAX 响应填充内容。
除了模板输出之外,我一切正常:
链接示例:
<a href="#" onclick="Kiosk.history(); return false;">History</a></li>
在 application.js 中:
history: function() {
var source;
Zepto.ajax({
url: 'templates/history.handlebars',
dataType: 'html',
cache: false,
success: function(data, status, response) {
source = data;
var template = Handlebars.compile(response.responseText);
var context = {
title: 'Static Title (to be replaced)'
};
$('#main-content').html(template(context));
}
});
车把文件:
<div class="row" id="history">
<div class="large-10 columns large-offset-1">
<script id="hb-history" type="text/x-handlebars-template">
<h2>{{ title }}</h2>
{{ body }}
</script>should have a template here
</div>
</div>
我似乎遗漏了一些东西,因为#main-content div 从未使用动态模板更新,只输出“应该是这里的模板”。