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

I just started using Mustache and I like it so far, but this has me perplexed.

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

I am using the GitHub gist API to pull down my gists, and part of what I want to do is include the embedding functionality into my page. The problem is Mustache seems to not want to have anything to do with my dynamic script tag.

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

For example, this works fine:

例如，这很好用：

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

Additionally, this works perfect:

此外，这非常有效：

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

If I try to pull these together, something goes terribly wrong:

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

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

Chrome Inspector shows this:

Chrome Inspector会显示以下内容：

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

... which looks like to me something is weird with escapes or whatnot, so I switch over to the raw syntax:

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

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

And I get the same result in Inspector:

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

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

How do I get the correct values to embed in the script tag?

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

EDIT

编辑

I am injecting the template as follows (in document.ready:

我按如下方式注入模板（在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);
    });

}

The actually template is inside of a ruby partial, but it is wrapped in a div (not a script tag, is that a problem?) (that's hidden):

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

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

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

</div>

I assume a div is ok rather than a script because in either case, I'm pulling the .html(). Is this a bad assumption?

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

3 个解决方案

#1

To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}.

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

#2

It seems like your template is in HTML and trying to retrieve the template using html() results in a pre-URL-escaped template to be returned. Try placing your template inside a <script type="text/html"> tag instead.

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

When you embed your template inside an HTML element that excepts more HTML elements as children, it may get processed by the browser as HTML. Escaping may occur. By using a <script> tag with a non-script content type, you're basically telling the browser not to touch your template.

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

#3

-1

It looks like your script is getting requested before Mustache has a chance to update the src property. What you want to do is define the template in a way that it's not parsed as part of the DOM. A common approach is to define your template inside of a <textarea> tag. This will preserve formatting and prevent character escaping.

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

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

Now, to instantiate the template:

现在，要实例化模板：

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

Here's an official example: http://mustache.github.com/#demo

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

#1