作者:zccst

本文记录基本使用二,主要讲sections。

{{#person}} {{/person}}
1,当person是null, undefined, false, 0, NaN, "", [], 空列表时不渲染

2,当person不空时渲染一次或多次。如果其中某一些为空,则改行略过,其他行正常。
var template = '{{#beatles}}* {{name}} <br/>{{/beatles}}';
var obj = {
    "beatles": [
        { "firstName": "John", "lastName": "Lennon" },
        { "firstName": "Paul", "lastName": "McCartney" },
        { "firstName": "George", "lastName": "Harrison" },
        { "firstName": "Ringo", "lastName": "Starr" }
    ],
    "name": function () {
        console.log(this,this===obj);//结论:由于循环的是beatles,所以this指向的是beatles,而不是obj。
        return this.firstName + " " + this.lastName;
    }
}

var rendered = Mustache.render(template,obj);
$('#target').html(rendered);

3,相反,就是输出空,仅在 section标签是null, undefined, false, 空list时
用{{^section}} 替换 {{#section}}

var template = '{{#repos}}<b>{{name}}</b>{{/repos}} {{^repos}}No repos :({{/repos}}';
var obj = {
"repos": []
}
var rendered = Mustache.render(template,obj);
$('#target1').html(rendered);

4,特殊情况:数组,里面每一项都是字符串时,可以用点代替

var template = '{{#musketeers}}* {{.}} <br/>{{/musketeers}}';
var obj = {
    "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}

var rendered = Mustache.render(template,obj);
$('#target').html(rendered);

5,function

var template = '{{#bold}}Hi {{name}}.{{/bold}}';
var obj = {
    "name": "Tater",
    "bold": function () {
        return function (text, render) {
            return "<b>" + render(text) + "</b>";//text是Hi {{name}}.render是原生函数
        }
    }
}

var rendered = Mustache.render(template,obj);
$('#target').html(rendered);

<div id="target">Loading...</div>

mustache.js使用基本(二)sections的更多相关文章

  1. vue系列---Mustache.js模板引擎介绍及源码解析(十)

    mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...

  2. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  3. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  4. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  5. mustache.js常见用法

    一.mustache基于JS模板引擎,能较为快捷和简单得实现数据得渲染 用法: 1.CDN引入mustache.js,以下是4.0.1版本,有需要可以去github上查询其他版本的代码. (funct ...

  6. mustache.js

    mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...

  7. 使用mustache.js 模板引擎输出html

    看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...

  8. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  9. mustache.js使用基本(三)

    作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> ...

  10. mustache.js基本使用(一)

    作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...

随机推荐

  1. Beam me out!

    Beam me out! 题目描述 King Remark, first of his name, is a benign ruler and every wrongdoer gets a second ...

  2. easyui formatter 返回easyui组件

    <table id="dg2" title="标题" style="width:400px;float: left;"> < ...

  3. flexigrid

    一.参考资料 1.jQuery插件flexiGrid的完全使用,附代码下载 2.修改flexigrid源码一(json,checkbox)[原创] 3.jQuery +UI + flexigrid做的 ...

  4. PAT1008

    1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B The highest building in our city has on ...

  5. SVM阅读资料

    1,Andrew Ng机器学习公开课笔记 -- 支持向量机 2,http://blog.pluskid.org/?page_id=683 3,支持向量机SVM(一) 4,机器学习中的算法(2)-支持向 ...

  6. shell执行php文件传递参数

    php -f index.php hello test 2314 shell命令执行php文件不像http那样通过GET方式传参 同样php文件获取的时候也不能用$_GET方法了 而是通过$argv[ ...

  7. css 10 款非常棒的CSS代码格式化工具推荐

    http://www.iteye.com/news/23692/  10 款非常棒的CSS代码格式化工具推荐 2011-12-14 09:31 by 副主编 wangguo 评论(0) 有9111人浏 ...

  8. ssh-copy-id

    建立无密码登录是经现root成功普通用户失败, chmod 0600 authorized_keys setenforce 0 ssh-copy-id  server2 ssh-add   ~/.ss ...

  9. 基于JAVA语言的多线程技术

    1.简介 多线程技术属于操作系统范围内的知识: 进程与线程 可以这么理解,一个应用程序就是一个进程,在一个进程中包含至少一个线程:进程就是线程的容器,真正工作.处理任务的是线程. 进程是操作系统分配资 ...

  10. IP 网际协议

    1. IP数据首部长度: 4位版本号 : 4 位,用于标明 IP 版本号,0100 表示 IPv4,0110 表示 IPv6.目前常见的是 IPv4. 4位首部长度: 首部长度是占4位,可表示的最大十 ...