我在使用 Handlebars 时遇到了这种情况。
我向服务器发出请求,并获取我需要的所有数据并将其放在 View 中。我使用 Handlebars 来放置数据,没有问题。
现在,我需要每 1 或 2 分钟执行一次请求。但是当我要将数据再次放入 View 中时,出现了错误。这是因为我已经编译好的模板和要插入模板的标签已经不存在了。
有什么解决办法吗?我在这里留下了我的代码:
在我看来我有这个:
<script id="vessels-info" type="text/x-handlebars-template">
{{#vessel}}
<div id="content-vessels" class="col-xs-12 col-sm-6">
<div class="page-header">
<h2 id="shipnametitle">{{vesselname}}</h2>
</div>
<div class="row">
<div class="col-sm-12">
<div class="list-group">
<a class="list-group-item">
<b>ID</b>: {{id}}
</a>
<a class="list-group-item">
<b>Posición GPS</b>: ({{lat}} , {{long}})
</a>
<a class="list-group-item {{alertafecha gpsdate}}" >
<b>Fecha GPS</b>: {{gpsdate}}
</a>
<a class="list-group-item {{alertavelocidad speed}}">
<b>Velocidad</b>: {{speed}}
</a>
{{#if rpm}}
<a class="list-group-item">
<b>RPM</b>: {{rpm}}
</a>
<a class="list-group-item {{alertafecha gpsdate}}" class="{{alerta}}">
<b>Fecha RPM</b>: {{rpmdate}}
</a>
{{/if}}
</div>
</div>
</div>
</div>
{{/vessel}}
</script>
在我的 JavaScript 中,我有这个:
function initAlerts() {
try {
getVesselsRequest(alertas, "mapa");
setInterval(initAlerts, 60000);
} catch (err) {
console.log(err);
}
}
function alertas(vessels, mapa) {
var fuente = $('#vessels-info').html();
var plantilla = Handlebars.compile(fuente);
var html = plantilla(vessels);
$('#map-container').html(html);
}
错误是这样的:
Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
我知道错误是当我通过 $('#vessels-info').html();
时到编译函数,标签<script>
ID 为“vessels-info”的已经不存在了,因为已经编译过了。
有什么帮助吗?
最佳答案
在这种情况下,您可以将对模板的引用保留为字符串。像这样的东西:
var templateString = $('#vessels-info').html();
function alertas(vessels, mapa) {
var plantilla = Handlebars.compile(templateString);
var html = plantilla(vessels);
$('#map-container').html(html);
}
将这样的变量放在全局范围内是不好的做法。如果您的应用程序变得更加复杂,我会建议创建一个对象,然后保存状态并进行定期更新。
关于javascript - Handlebars 重新编译模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28562982/