Mustache is a classic front-end template engine that is considered an alternative to a technology architecture that separates the front and back ends. With the popularity of heavy-duty frameworks (AngularJS, ReactJS, Vue), front-end template technology has become somewhat of a standard, Mustache’s value lies in its stability and classic: Homepage: github.com/janl/mustac… Documents: the mustache. Making. IO/mustache. 5…. Mustache, when used, appears on the page {

Tags such as {person}}, which are displayed on load and then immediately replaced, are not friendly for rendering the page, which is what I’m using

A pain point in the process.

<! DOCTYPEhtml> 
<html> 
<head> 
<title>mustache.js</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body>
<div id="demo"></div>
<script type="text/x-mustache-template" id="template">
    <div>
    Hello {{name}}
    You have just won {{value}} dollars!
    {{#in_ca}}
    Well, {{taxed_value}} dollars, after taxes.
    {{/in_ca}}
    </div> 
    <div>{{company}}</div>
    <div>{{{company}}}</div>
    <div>
        {{#repo}}
          <b>{{name}}</b>
        {{/repo}}
    </div>
    <div>
        {{#wrapped}}
          {{name}} is awesome.
        {{/wrapped}}
    </div>
    <div>
        {{#person?}}
            Hi {{name}}!
        {{/person?}}
    </div>   
    <div>
        {{#repo_new}}
          <b>{{name}}</b>
        {{/repo_new}}
        {{^repo_new}}
          No repos :(
        {{/repo_new}}
    </div>  
    <div>
        <h1>Today{{! ignore me }}.</h1>
    </div>
</script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>
<script type="text/javascript">
    var template = $('#template').html();
    //Mustache.parse(template);
    var temp = Mustache.render(template, {
        "name": "Xu Tongbao"."value": 10000."taxed_value": 10000 - (10000 * 0.4),
        "in_ca": true."company": "<b>GitHub</b>"."repo": [{"name": "resque" },
            { "name": "hub" },
            { "name": "rip"}]."wrapped": function() {
            return function(text, render) {
                return ' ' + render(text) + '</b>'; }},"person?": { "name": "Jon" },
        "repo_new": []}); $('#demo').html(temp);
</script>
</body> 
</html> 
Copy the code