Mustache JS Templating – 如何在脚本标记字符串中嵌入变量？

我刚开始使用Mustache，到目前为止我喜欢它，但这让我感到困惑。

我正在使用GitHub gist API来提取我的要点，我想要做的部分内容是将嵌入function包含在我的页面中。 问题是Mustache似乎不想与我的动态脚本标签有任何关系。

例如，这很好用：

 {{id}}   

此外，这非常有效：

如果我试图把它们拉在一起 ，那就会出现严重错误：

Chrome Inspector会显示以下内容：

 GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found) 

…看起来像我的东西是逃避或诸如此类的奇怪，所以我切换到原始语法：

我在Inspector中得到了相同的结果：

 GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found) 

如何获取嵌入脚本标记的正确值？

编辑

我按如下方式注入模板（在document.ready ：

 function LoadGists() { var gistApi = "https://api.github.com/users//gists"; $.getJSON(gistApi, function (data) { var html, template; template = $('#mustache_gist').html(); html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, ''); $('.gist').html(html); }); } 

实际模板是在ruby部分内部，但是它包含在div中（不是脚本标记，这是一个问题？）（隐藏）：

 
 {{#gists}}  {{/gists}}  

我假设div是好的而不是script因为在任何一种情况下，我都拉着.html() 。 这是一个不好的假设吗？

Answer 1

要避免在Mustache中自动转义，请使用{{{token}}}而不是{{token}}。

Answer 2

您的模板似乎是HTML格式，并尝试使用html()检索模板，导致返回前URL转义模板。 尝试将模板放在标记内。

当您将模板嵌入到除了作为子元素的HTML元素之外的HTML元素中时，它可能会被浏览器作为HTML处理。 可能会发生转义。 通过使用带有非脚本内容类型的标记，您基本上告诉浏览器不要触摸您的模板。

Answer 3

在Mustache有机会更新src属性之前，您的脚本似乎已被请求。 你想要做的是以一种不被解析为DOM的一部分的方式定义模板。 一种常见的方法是在标记内定义模板。 这将保留格式并防止字符转义。

  <script src='http://gist.github.com/{{id}}.js'></script>  

现在，要实例化模板：

 var template = $('#gist-detail-template').val(); var html = Mustache.to_html(template, yourTemplateData); 

这是一个官方的例子： http ： //mustache.github.com/#demo