mustache.js使用基本(二)sections
作者: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的更多相关文章
- vue系列---Mustache.js模板引擎介绍及源码解析(十)
mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- 模板引擎mustache.js
Javascript模板引擎mustache.js详解 阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
- mustache.js常见用法
一.mustache基于JS模板引擎,能较为快捷和简单得实现数据得渲染 用法: 1.CDN引入mustache.js,以下是4.0.1版本,有需要可以去github上查询其他版本的代码. (funct ...
- mustache.js
mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...
- 使用mustache.js 模板引擎输出html
看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...
- 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- mustache.js使用基本(三)
作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> ...
- mustache.js基本使用(一)
作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...
随机推荐
- Beam me out!
Beam me out! 题目描述 King Remark, first of his name, is a benign ruler and every wrongdoer gets a second ...
- easyui formatter 返回easyui组件
<table id="dg2" title="标题" style="width:400px;float: left;"> < ...
- flexigrid
一.参考资料 1.jQuery插件flexiGrid的完全使用,附代码下载 2.修改flexigrid源码一(json,checkbox)[原创] 3.jQuery +UI + flexigrid做的 ...
- PAT1008
1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B The highest building in our city has on ...
- SVM阅读资料
1,Andrew Ng机器学习公开课笔记 -- 支持向量机 2,http://blog.pluskid.org/?page_id=683 3,支持向量机SVM(一) 4,机器学习中的算法(2)-支持向 ...
- shell执行php文件传递参数
php -f index.php hello test 2314 shell命令执行php文件不像http那样通过GET方式传参 同样php文件获取的时候也不能用$_GET方法了 而是通过$argv[ ...
- css 10 款非常棒的CSS代码格式化工具推荐
http://www.iteye.com/news/23692/ 10 款非常棒的CSS代码格式化工具推荐 2011-12-14 09:31 by 副主编 wangguo 评论(0) 有9111人浏 ...
- ssh-copy-id
建立无密码登录是经现root成功普通用户失败, chmod 0600 authorized_keys setenforce 0 ssh-copy-id server2 ssh-add ~/.ss ...
- 基于JAVA语言的多线程技术
1.简介 多线程技术属于操作系统范围内的知识: 进程与线程 可以这么理解,一个应用程序就是一个进程,在一个进程中包含至少一个线程:进程就是线程的容器,真正工作.处理任务的是线程. 进程是操作系统分配资 ...
- IP 网际协议
1. IP数据首部长度: 4位版本号 : 4 位,用于标明 IP 版本号,0100 表示 IPv4,0110 表示 IPv6.目前常见的是 IPv4. 4位首部长度: 首部长度是占4位,可表示的最大十 ...