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

加载后，对 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
  };
});