从外部文件加载 jQuery 模板？

Posted 2023-02-24

【中文标题】从外部文件加载 jQuery 模板？

【英文标题】：load jQuery-Templates from external file?

【发布时间】：2011-05-20 22:48:27

【问题描述】：

我刚开始使用 jQuery 的模板引擎。到目前为止看起来相当不错。但是我想知道是否可以以某种方式从外部文件加载模板。想象一下有很多模板。这会弄乱 html 代码，并且也不能缓存，并且必须在每个请求时下载。

我希望有一种方法可以将它们全部定义在一个外部文件中，然后加载它们并将编译后的模板存储到 localStorage 中。

有人知道如何从外部文件加载它们吗？

【参考方案1】：

您可以使用 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>

如果您只想加载任何模板一次，您现在可以为加载的模板添加本地存储逻辑或数组。

【讨论】：

+1 包括使用 .template() 编译和 $.tmpl() 渲染的示例。这允许稍后重复调用 $.tmpl()，而无需获取或编译。

它给出：TypeError: $.template is not a function

【参考方案2】：

我将litle lib编写为jQuery插件，用于在出现块上呈现html，并在浏览器中使用indexDB缓存jQuery HTML Template Loader

【参考方案3】：

我最近编写了一个 javascript 库来帮助解决这个问题：

https://www.github.com/stevenmhunt/tmpl.loader

您可以使用<link> 标签添加 jsRender 或任何其他类型的模板文件，它们会自动注册。

【讨论】：

链接已损坏。 :(

很抱歉，我在几年前更改了我的 github 名称。链接现已修复。