3

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

提前致谢。

4

2 回答 2

4

正如我在评论中所说，您将无法像您想要的那样引用模板文件（使用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支持 jQuery Deferreds 的较新的 jqXHR 返回值。

更新

只是为了评论我如何在我的项目中处理这个问题。我使用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
  };
});
于 2012-11-28T16:10:47.983 回答
0

此解决方案可以避免所有这些 $.get

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

  1. 有一个外部文件（不是 .html 而是 .js）来包含所有模板。
  2. 拥有相应 .js 文件的<script>句柄$.get。
  3. 与 coffeescript 一起使用以删除行尾转义时简化。
  4. 加载 .js 字符串可能更快，然后必须加载和处理每个文件以最终以 .js 字符串结束。
于 2012-12-05T00:26:38.240 回答