gpt4 book ai didi

javascript - 将 Handlebars 模板抽象为不带 AJAX 的外部文件

转载 作者:行者123 更新时间:2023-11-29 19:14:41 27 4
gpt4 key购买 nike

有什么方法可以更简单地加载 Handlebars 模板吗?似乎是一件容易做到的事情。如果我有以下 index.html 代码:

<body>
<h1>From the index.html</h1>
<div id="hbs"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="test" type="text/x-handlebars-template">
<h2>This is from HBS</h2>
<p>
hbs generated this p tag!
</p>
</script>
<script src="js/script.js"></script>
</body>

下面是js/script.js中编译模板的脚本代码:

var template = Handlebars.compile(document.querySelector("#test").innerHTML)
document.querySelector("#hbs").innerHTML = template({})

这很好用,但是当我打开 index.html 时,我可以看到通过模板生成的 header 和 p 标记。必须有一种简单的方法将这个模板抽象到一个单独的文件中!

最佳答案

您可以将模板放入 hbs 文件中:

模板.hbs:

<script type="text/x-handlebars-template">
<h2>This is from HBS</h2>
<p>
hbs generated this p tag!
</p>
</script>

然后使用 ajax 获取文件而不是 querySelector 获取 html

$document.ready(function(){
$.get( '/url/template.hbs', function( source ) {
var template = Handlebars.compile(source);
document.querySelector("#hbs").innerHTML = template({});
}
});

关于javascript - 将 Handlebars 模板抽象为不带 AJAX 的外部文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36264011/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com