Mustache JS 模板 - 如何在脚本标签字符串中嵌入变量？

Question

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

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

例如，这很好用：

<div class="gist-detail">
    {{id}} <!-- This produces a valid Gist ID -->
</div>

此外，这很完美：

<div class="gist-detail">
    <script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>    

如果我尝试将这些放在一起，就会出现严重错误：

<div class="gist-detail">
    <script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>  

Chrome Inspector 显示如下：

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

... 在我看来，转义或类似的东西很奇怪，所以我切换到原始语法：

<div class="gist-detail">
    <script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>  

我在 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/<myuser>/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 中（不是脚本标签，有问题吗？）（这是隐藏的）：

<div id="mustache_gist" style="display: none;">

    {{#gists}}
        <!-- see above -->
    {{/gists}}

</div>

我认为div 可以，而不是script，因为无论哪种情况，我都会选择.html()。这是一个糟糕的假设吗？

Answer 1

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

Answer 2

您的模板似乎是 HTML 格式，并且尝试使用 html() 检索模板会导致返回预 URL 转义模板。尝试将您的模板放在 <script type="text/html"> 标记内。

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

Answer 3

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

<textarea id="gist-detail-template" style="display:none">
  <script src='http://gist.github.com/{{id}}.js'></script>
</textarea>

现在，实例化模板：

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

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