Question

我尝试使用mustache.js进行模板化但是我的基本代码不起作用请帮助我出错 -

var person = {
    firstName: "Christophe",
    lastName: "Coenraets"
};

var template = "<h1>{{firstName}} {{lastName}}</h1>";
var output = Mustache.render(template, person);
document.getElementById('result1').innerHTML = output;

上面的代码正在运行，但以下代码无效： -

这一行写在我的.html页面中：

<script id="sample_template" type="text/template">
    <h1>{{firstName}} {{lastName}}</h1>
</script>

这一行写在我的.js文件中：

var data ={
   firstName: "Christophe",
   lastName: "Coenraets"
};
var template = $('#sample_template').html();
//console.log(template);  this prints the html content in console
var info = Mustache.to_html(template, data);
$('#result1').html(info);

Answer 1

我得到的解决方案我有胡子服务器端和客户端，我上面描述的问题是，当我尝试在客户端填充占位符时，那些占位符已经在服务器端消耗（becoz我没有说话）必须呈现服务器端以及呈现客户端的文件。所以他们在客户端渲染时没有占位符，所以只有我会显示html标签。

Answer 2

我和level_0有同样的问题。服务器端的Django模板也使用与mustache-js相同的标签，即{{}}

这是一个简单的例子，它超越了Django服务器端的模板问题。

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>

<body>
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
        Hello {% templatetag openvariable %} name {% templatetag closevariable %}
    </script>
    <script>
    $(document).ready(function() {

        var template = $('#template').html();
        console.log(template);
        Mustache.parse(template); // optional, speeds up future uses
        var rendered = Mustache.render(template, { name: "Luke" });
        $('#target').html(rendered);

    });
    </script>
</body>

</html>

Answer 3

如果您像我一样在此线程中结束，因为您在Google上搜索“ Mustache.to_html不是函数”，则可以将Mustache.to_html替换为Mustache.render。第一个已被删除，因此您可能已更新了库。

Answer 4

从文档中可以看出，.to_html()已被弃用......

Answer 5

这对我有用：http://jsfiddle.net/evildonald/qK5NT/

js：

$(document).ready(function () {
  var data ={
     firstName: "Christophe",
     lastName: "Coenraets"
  };

  var template = $('#sample_template').html();

  var info = Mustache.to_html(template, data);

  $('#result1').html(info); 
});

HTML：

<script id="sample_template" type="text/template">
  <h1>{{firstName}} {{lastName}}</h1>
</script>

mustache.js无法正常工作

5 个答案: