预编译Mustache模板还是外部加载？

Question

需要一个Coffeescript包含函数，这样就可以在编译javascript时加载外部mustache模板而不会混杂在coffee文件中。

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

我想预编译一些静态mustache模板并将它们包含在生成的javascript函数中，这些函数可以被Stitched并压缩成单个文件。

是否有针对此目的的项目或脚本？

- Ronnie

Answer 1

我认为这个方案适合您，它是一个针对Mustache和其他模板引擎的JavaScript模板预编译器，您可以使用https://github.com/kupriyanenko/jsttojs进行下载。

例如，您可以在命令行中使用。

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

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

- kupriyanenko

---

在Stack Overflow中，不欢迎仅包含链接的回答。请在此处提供相关信息。 - Himanshu

当然欢迎他们提供答案。但如果答案可以带给你并且同时在SO上进行归档，那就更好了，因为链接的解决方案可能会发生变化/404错误或其他一些情况，使得仅有链接不再有用。 - Jordan Feldstein

Answer 2

我正在考虑做类似的事情。我还没有尝试过，但似乎可以使用Node.js和Mu（Node.js的Mustache构建）来完成这个任务。伪代码如下...

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

- Brian Reischl

---

看起来 Twitter 也有一些有趣的东西，比如：http://twitter.github.com/hogan.js/。 - Ronnie

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在他的文章中介绍了一种技术，可以帮助我们使用JavaScript进行微型模板设计。你可以参考http://ejohn.org/blog/javascript-micro-templating/

- sciritai

---

另一个答案谈到了使用“text/x-mustache”作为脚本类型。为什么不这样做？ - Kristian

没有理由去做或不做。类型仍然无法识别，但如果它能更清晰地表明这是一个Mustache模板，那就可以了。 - sciritai

我也是这么想的...只是文件记录的问题，几乎到那个点了。 - Kristian

Answer 4

首先，您可以使用以下内容：

<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-templating/99

- c-smile

Answer 5

Twitter的库Hogan.js可以胜任此工作。

- Marek Gregor

Answer 6

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

- genericdave