小胡子JS模板 - 如何在脚本标记字符串中嵌入变量？ [英] Mustache JS Templating - How do I embed a variable in a script tag string?

问题描述

我使用GitHub gist API来拉下我的要点，并且我想要做的一部分就是在我的页面中加入嵌入功能。问题是胡子似乎不想与我的动态脚本标记有任何关系。

例如，这可以正常工作：

 < div class =gist-detail> 
 {{id}} <！ - 这会产生一个有效的Gist ID  - > 
< / div> 
  

另外，这个功能完美：

 < div class =gist-detail> 
< script src ='http：//gist.github.com/1.js'>< / script> <！ - 使用Gist ID＃1生成正确的嵌入标记 - > 
< / div> 
  

如果我试图将这些拉到一起，那么一些错误会发生： / p>

 < div class =gist-detail> 
< script src ='http：//gist.github.com/ {{id}} .js'>< / script> <！ - 吹起来！ - > 
< / div> 
  

Chrome Inspector显示了这一点：

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

...这对我来说看起来有些奇怪，因为转义或whatnot，所以我切换到原始语法：

 < div class =gist-detail> 
< script src ='http：//gist.github.com/ {{{id}}} .js'>< / script> <！ - 再次吹响！ - > 
< / div> 
  

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

  GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404（Not Found）
  
 
如何获得正确的值嵌入到脚本标记中？
 
 
 
编辑
 
 
 
我按如下方式注入模板（在 document.ready ：
 函数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_giststyle =display：none;> 
 
 {{#gists}} 
 <！ - 请参阅上文 - > 
 {{/ gists}} 
 
< / div> 
  
我假设一个 div 是可以的，而不是一个脚本，因为在任何情况下，我都拉 .html（）。这是一个不好的假设吗？
解决方案
为了避免Mustache中的自动转义，使用{{{token}}}而不是{{token }}。  
I just started using Mustache and I like it so far, but this has me perplexed.

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.

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:
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:
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:
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):
<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?
解决方案
To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}. 

                        
这篇关于小胡子JS模板 - 如何在脚本标记字符串中嵌入变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！