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

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

3 个答案: