如何删除 $.get 以获取 mustache.js 模板答案

【问题标题】：How to remove $.get to fetch a mustache.js template如何删除 $.get 以获取 mustache.js 模板
【发布时间】：2012-11-28 15:47:03
【问题描述】：

使用 mustache.js，

我希望依靠浏览器标准页面加载器来加载我的 mustaches.js 模板。

换句话说，我想删除 JQuery 请求 ($.get) 以将模板放入内存，但将模板留在单独的 html 文件中。目前这项工作：

文件contact.html：

<script id="tpl-test" type="text/html">
   <h1> {{firstname}} </h1>
</script>

文件 my.js

$.get("tpl/contact.html", function(templates){
   var template = $(templates).filter('#tpl-test').html();
   var jdata={firstname: 'fname'};
   $('body').append(Mustache.render(template, jdata));
});

我希望有类似的东西：

文件contact.html（保持原样）

而不是 jquery $.get 请求，我更喜欢：

在 index.html 中：

<script id="tpl-test" src="tmpl/contact.html" type="text/html"></script>

更新： 在 Chrome 中，模板是这样加载的：

归档 my.js（我的愿望，但这不起作用）

function ondemand(){
   var template = $(templates).filter('#tpl-test').html();
   var jdata={firstname: 'fname'};
   $('body').append(Mustache.render(template, jdata));
});

提前致谢。

【问题讨论】：

– 你将无法这样做。您是否正在尝试克服 $.get 给您带来的特定问题？我的猜测是您不喜欢使用模板时的延迟。你能详细说明一下吗？
@Doug Neiner：好评论，我不希望将 window.load 事件与（自定义事件，确认所有模板的加载）同步。我想避免变成我使用模板但发现它尚未加载的情况。在我看来，$.get 应该用于用户动态操作（或需求）。对我来说，模板是一个静态元素。作为一个小细节，从美学上讲，我不希望用所有这些模板污染主 index.html，我稍后会监督不同 index.html 组合的问题。
——我通常使用 Require.JS 和文本插件。我需要我的模板到需要它们的文件中。而且我可以将我所有的 JS 和模板预编译成一个用于生产的资产。如果您觉得有帮助，我也会添加我的答案。
我知道我应该使用require.js，但是，我的知识还没有。但同样，require.js 是一个动态过程，而模板是静态元素，我不希望以动态方式处理它们。没有 require.js 的任何技巧将不胜感激？
但是，除非您使用服务器端包含将它们包含在 HTML 中，否则您无法在没有 JavaScript 的情况下将它们加载到 HTML 中。当然，你不想污染你的 HTML（同意），所以留下 JavaScript。我建议的两种方法都可以解决问题。我可以详细说明第一个答案，但它可以满足您的要求。页面加载后立即开始加载模板（如您想要的脚本解决方案），但无论模板是否已准备好，您都可以使用您的 ondemand。没有想到别的，对不起:(

标签： jquery templates mustache

【解决方案1】：

正如我在评论中所说，您将无法按照自己的意愿引用模板文件（使用 script 和 src 属性）。

如果我能猜到你为什么不喜欢 $.get 是因为它让你在实际请求文件时等待使用模板。

我想建议对您的代码进行一些小改动，以达到您想要的效果：

// Somewhere that runs immediately
// contactTemplate will contain a jqXHR object
var contactTemplate = $.get( "tmpl/contact.html ");


// Somewhere later in your code
function ondemand(){
   contactTemplate.done( function ( template ) {
       var jdata={firstname: 'fname'};
       $('body').append(Mustache.render(template, jdata));
   });
});

这使您的模板很可能在调用ondemand 时被加载，但如果不是，done 回调将等待它返回。这消除了对竞争条件的担忧，并且仍然可以快速加载模板。

加载后，对ondemand 的后续调用将立即调用done 回调。

这使用来自$.get 的更新的 jqXHR 返回值，它支持 jQuery Deferreds。

更新

只是想评论一下我在我的项目中是如何处理这个问题的。我使用RequireJS 和text 插件来处理模板。我还使用r.js 优化器，因此我的所有模板和JS 代码都可以捆绑到生产站点上的单个资源中。这让我可以指定使用它的依赖项（JavaScript），但不必怀疑我的模板是否在我去使用它们时被加载。

为了让您了解这在 require 中的外观，假设我有一个 contact.js 有我的 ondemand 电话：

define( [
  "jquery",
  "mustache",
  "text!tmpl/contact.tmpl"
], function ( $, Mustache, contactTemplate ) {
  function ondemand(){
    var jdata={firstname: 'fname'};
    $('body').append(Mustache.render(contactTemplate, jdata));
  });

  return {
     show: ondemand
  };
});

【讨论】：

我喜欢你的提议。目前，我在网络上的所有搜索都无法解决这个问题。尽管您没有阻止 $.get，但您确实通过很好地避免模板的 load() 和 uses() 之间的竞争条件来改进搜索到的解决方案。

【解决方案2】：

this solution 可以避免所有这些 $.get

本方案满足以下需求：

有一个外部文件（不是 .html 而是 .js）来包含所有模板。
让<script>处理对应的$.get .js 文件。
在与咖啡脚本一起使用以删除行尾转义时进行了简化。
加载 .js 字符串可能更快，然后必须加载和处理每个文件以最终以 .js 字符串结束。

【讨论】：