mustache.js使用笔记

最新推荐文章于 2024-04-12 09:41:40 发布

徐同保

最新推荐文章于 2024-04-12 09:41:40 发布

阅读量1.7k

点赞数 3

分类专栏： web前端前端技术分享文章标签： javascript mustache

本文链接：https://blog.csdn.net/xutongbao/article/details/78625839

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎
是一种可以被考虑的技术选型，随着重型框架（AngularJS、ReactJS、Vue）的流行，
前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典：
主页： https://github.com/janl/mustache.js/
文档： https://mustache.github.io/mustache.5.html

Mustache 在使用的时候，会在页面上出现 {{person}} 这样的标签，载入的时候回显
示出来，然后立即被替换掉，这个对于页面的呈现是不够友好的，这是我在使用的过

程中遇到的一个痛点。

<!DOCTYPE html> 
<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": "徐同保",
        "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 '<b style="color:green;font-size:36px;">' + render(text) + '</b>';
            }
        },
        "person?": { "name": "Jon" },
        "repo_new": []
    });
    $('#demo').html(temp);
</script>
</body> 
</html>