如何删除$ .get来获取mustache.js模板

Question

使用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));
});

提前致谢。

Answer 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回调将等待它返回。这消除了对竞争条件的担忧，并且仍然可以快速加载模板。

加载后，对[{1}}的后续调用会立即调用ondemand回调。

这使用来自done的较新的jqXHR返回值，该值支持jQuery Deferreds。

<强>更新

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

为了让您了解这看起来如何，请假设我r.js有contact.js来电：

ondemand

Answer 2

this solution

可以避免所有这些$ .get

此解决方案满足以下需求：

1. 有一个外部文件（不是.html但.js）包含所有内容 模板。
2. 让<script>处理相应的$.get .js文件。
3. 与coffeescript一起使用时简化以删除行尾逃逸。
4. 加载.js字符串的速度可能更快，然后必须加载和处理每个文件，最后以.js字符串结束。