胡子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检查器显示如下：

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>  

我在检查器中得到了相同的结果：

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()。这个假设不太妥当吗？

- Evan

---

你如何调用你的模板？ - Ates Goral

增加了一些实现细节。 - Evan

是的，使用 <div> 是问题所在。请看下面我的回答... - Ates Goral

可能是重复的问题：使用Mustache填充HTML标签参数。 - Ates Goral

Answer 1

为了避免Mustache自动转义，请使用{{{token}}}代替{{token}}。

- oarevalo

Answer 2

看起来你的模板是 HTML 的，尝试使用 html() 获取模板会返回一个已进行 URL 转义的模板。请尝试将模板放在 <script type="text/html"> 标签中。

当你将模板嵌入到可以接受更多 HTML 元素作为子元素的 HTML 元素中时，它可能会被浏览器处理为 HTML。转义可能会发生。通过使用具有非脚本内容类型的 <script> 标签，你基本上告诉浏览器不要触摸你的模板。

- Ates Goral

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

- Amit

---

我将div模板替换为textarea，并使用template = $('#mustache_gist').val();检索模板 - 这清除了检查器错误，但脚本标记从未呈现，有什么想法吗？ - Evan

可能是您将HTML附加到DOM的方式不正确。我建议尝试使用 $('body').append(html)。然后检查body以确保标签实际上已被附加到其中。 - Amit