在 HTML & jQuery 中使用部分命令的小胡子

Question

我在 HTML 页面中定义了一个小胡子部分。（不是脚本或任何块）我的变量被替换了，但 parcial 没有。如果我记录加载的模板，“>”将转换为“>” ——这是可以理解的。但是我如何在我的 HTML 中指定部分包含，或者我的方法是错误的？

$(function($) {
    var template = $('#main').html();
    
    // > is converted to entity &gt;
    // var: {{ name }}<br>partial: {{&gt; partial }}
    console.log(template);
    
    var view = {name: 'Paul'};
    var partials = {partial: '<h1>!</h1>'};
    var html = Mustache.render(template, view, partials);
    $('#main').html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.js"></script>
<div id="main">
    var: {{ name }}
    <br>
    partial: {{> partial }}
</div>

这里是 fiddle：http://jsfiddle.net/f9df3txv/2/

谢谢大家！

Answer 1

尝试使用 var template = $('#main').text(); 而不是 var template = $('#main').html()。希望对您有所帮助！

Answer 2

我做了一个解决方法，通过使用简单的字符串替换将“>”字符返回到模板。

$(function($) {
    var template = $('#main').html().replace(/{{&gt;/g, "{{>");
    var view = {name: 'Paul'};
    var partials = {partial: '<h1>!</h1>'};
    var html = Mustache.render(template, view, partials);
    $('#main').html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    var: {{ name }}
    <br>
    partial: {{> partial }}
</div>

在 HTML & jQuery 中使用部分命令的小胡子

Mustache using Partial Command in HTML & jQuery

html

javascript

jquery

mustache