我刚开始使用 jQuery 的模板引擎。到目前为止看起来相当不错。但是我想知道是否可以以某种方式从外部文件加载模板。想象一下有很多模板。这会弄乱 html 代码,并且也无法缓存,并且必须在每次请求时下载。
我希望有一种方法可以将它们全部定义在一个外部文件中,然后加载它们并将编译的模板存储到 localStorage 中。
有谁知道如何从外部文件加载它们?
我刚开始使用 jQuery 的模板引擎。到目前为止看起来相当不错。但是我想知道是否可以以某种方式从外部文件加载模板。想象一下有很多模板。这会弄乱 html 代码,并且也无法缓存,并且必须在每次请求时下载。
我希望有一种方法可以将它们全部定义在一个外部文件中,然后加载它们并将编译的模板存储到 localStorage 中。
有谁知道如何从外部文件加载它们?
您可以使用 ajax 加载此模板。
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
{ Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
$.get("templates/movieTemplate.html", function(data, textStatus, XMLHttpRequest){
var markup = data; //"<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"
/* Compile markup string as a named template */
$.template( "movieTemplate", markup );
/* Render the named template */
$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
});
</script>
如果您只想加载任何模板一次,您现在可以为加载的模板添加本地存储逻辑或数组。
我写了 litle lib 作为 jQuery 插件,用于在出现块上呈现 html,并在浏览器jQuery HTML 模板加载器中缓存 indexDB
我最近写了一个 javascript 库来帮助解决这个问题:
https://www.github.com/stevenmhunt/tmpl.loader
您可以使用标签添加 jsRender 或任何其他类型的模板文件<link>
,它们会自动注册。