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

使用mustache.js

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

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

---

文件contact.html:

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

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

---

我希望有类似的东西：

---

文件contact.html（保持原样）

与jquery$.get请求不同，我更喜欢：

在index.html中：

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

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

---

提前感谢。

正如我在评论中所说的，您将无法像希望的那样引用模板文件（使用

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延迟

更新

我只是想谈谈我在项目中是如何处理这个问题的。我使用和

文本
插件来处理模板。我还使用
r.js
optimizer，因此我的所有模板和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都可以通过以下方式避免：

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

有一个外部文件（不是.html而是.js）来包含所有
模板
让
处理
$。获取相应的

.js文件

当与coffeescript一起使用以删除行尾转义时简化
加载.js字符串可能比加载和处理每个文件更快，最终得到的是.js字符串
–你不能这样做。您是否正试图克服
$.get
为您带来的特定问题？我猜你不喜欢使用模板时的延迟。你能详细说明一下吗？@Doug Neiner:好的评论，我不希望将window.load事件与（自定义事件，确认所有模板的加载）同步。我希望避免陷入使用模板的场景，但发现它尚未加载。在我看来，$.get应该用于用户的动态操作（或需求）。对我来说，模板是一个静态元素。作为一个次要的细节，从美学上讲，我不想用所有这些模板污染主index.html，我会在以后监督不同index.html组合的问题。我通常使用Require.JS和文本插件。我需要将我的模板放入需要它们的文件中。我可以将我所有的JS和模板预编译成一个用于生产的资产。如果你觉得我的答案有帮助的话，我会补充我的答案。我知道我应该使用require.js，但是，我的知识还没有。但同样，require.js是一个动态过程，而模板是静态元素，我不希望以动态方式处理它们。如果没有require.js，任何技巧都是值得欣赏的？但是，如果没有JavaScript，您无法将它们加载到HTML中，除非您使用服务器端包含将它们包含在HTML中。当然，你不想污染你的HTML（同意），所以剩下JavaScript。我建议的两种方法都能解决这个问题。我可以详细说明第一个答案，但它符合你的要求。页面加载后立即开始加载模板（如您想要的脚本解决方案），但无论模板是否准备就绪，您都可以使用
ondemand
。抱歉，我想不出其他的问题了：（我喜欢你的建议。目前，我在web上的所有搜索都无法解决这个问题。虽然你没有阻止$.get，但你确实通过避免模板的load（）和uses（）之间的竞争条件来改进搜索的解决方案。