预编译小胡子模板还是从外部加载？

Question

拥有一个 Coffeescript include 函数会很有用，这样它就可以在用 JavaScript 编译时加载外部胡子模板，并且不会弄乱咖啡文件。

实际上，您可以在运行时加载 .mustache 文件，但您需要使用 ajax 请求来调用它们，这会涉及一些性能损失。

我想预编译一些静态胡子模板并将它们包含在生成的 javascript 函数中，该函数可以 缝合 并压缩在一个文件。

有相关的项目或脚本吗？

Answer 1

我认为这个解决方案适合您，用于 Mustache 和其他模板引擎的 javascript 模板预编译器 https://github.com/kupriyanenko/jsttojs

例如，与命令行一起使用

jsttojs templates compiled/templates/index.js --ext mustache --watch

或使用 grunt 解决方案，grunt-jsttojs

Answer 2

首先，您可以使用这样的方法：

<script type="text/x-mustache" id="tid...">
  ... mustache template ...
</script>

将模板包含在专用脚本块中，而不是作为代码中的字符串。
getElementByID() + innerHtml() 将为您提供可以使用的源代码。

关于 Mustache 一般而言 - 严格来说你无法编译它。每次“实例化”模板时，模板都会被解释。

如果您确实需要编译它们，请考虑使用我的 Kite 引擎：
http://code.google.com/p/kite/ 或任何其他可编译模板：
http://jsperf.com/dom-vs-innerhtml-based-templated/99

Answer 3

当然，这就是我们在我工作的地方所做的事情。所有模板都放在一个 html 文件中，并在构建时插入到 dom 中。每个模板都存储在未知类型的脚本标记中，因此浏览器会忽略它。然后您可以使用选择器引用它们。

<script type="unknown" id="id_of_template">
  <ul>
  {{#words}}
    <li>{{.}}</li>
  {{/words}}
  </ul>
</script>

render = (template) ->
  view =
    words: [ 'hello', 'there' ]
  template = $('#' + template).html()
  html = Mustache.to_html template, view

John Resig 有一篇关于该技术的好文章 http://ejohn.org/blog/javascript-micro -模板/

Answer 4

我正在考虑做类似的事情。我还没有尝试过，但似乎你可以使用 Node.js 和 Mu，小胡子为 Node.js 构建，以执行此操作。伪JS代码...

var compiledTemplate = Mu.compile("myTemplateFile.html")
fs.writeFile("myCompiledTemplate.js", compiledTemplate.toString());

Answer 5

Twitter 的库 Hogan.js 可以完成这项工作。

Answer 6

您可以 渲染直接包含的模板字符串在您的源代码中使用 Mustache.to_html() ，如果有帮助的话。