Mustache.js使用笔记(内容属于转载总结)
1、Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}”
Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版,
也就是例子中的template,第二个就是数据源也就是例子中的user对象
例:
$(function () {
var user = { name: "Olive", age: 23, sex: "girl" };
var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex}}";
var view = Mustache.render(template, user);
$("#user_info").html(view);
})
2、view最终的结果是My name is Olive ,I'm 23 ,Sex is girl;
3、对象数组循环渲染展示
var users = { result: [
{ name: "Only", age: 24, sex: "boy" },
{ name: "for", age: 24, sex: "boy" },
{ name: "Olive", age: 23, sex: "girl" }
]};
var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
var views = Mustache.render(template, users);
$("#users_info").html(views);
(1)对于对象数据Mustache也有其特殊的语法:{{#}}{{/}},如果所给定的数据源是一个对象数组,
则可以使用该语法,很方便的用来循环展示。
{{#}}{{/}}还有另外的一层意思就是判断是否为空,如果{{#}}中的值为null或false或undefined则其标记内的内容不展现。
有了判空的方法当然还有与之相反的方法{{^}},该方法表示的意思与{{#}}意思相反。
(2) 其中{{#}}标记表示从该标记以后的内容全部都要循环展示
{{/}}标记表示循环结束。这种情况多用于table行的展示。
注:在某些时候,我们要绑定的数据源中可能会有一些html标记,如果单纯的采用{{}}这种方式来绑定的话,默认的会将html标记转义。
为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。
参考网址:http://blog.csdn.net/xuemoyao/article/details/17896203
Mustache.js使用笔记(内容属于转载总结)的更多相关文章
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
- 模板引擎mustache.js
Javascript模板引擎mustache.js详解 阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
随机推荐
- C语言中'\0'与'\n'
'\0'表示ASCII编号为0的字符,在C语言中最常用于代表字符串结束的标志.'\n'表示ASCII编号为13的字符,代表回车键,输出这个字符就会换一行. '\0'作为字符串的结束标志,本身会占用一个 ...
- Swift 动画学习笔记
视频地址: http://www.swiftv.cn/course/i275v5lz 1,动画属性 position(位置),opacity(透明度,0 全透明,1 不透明),Scale(尺寸),Co ...
- MVC部署IIS设置
根目录→处理程序映射→添加通配符脚本映射 C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll
- 学习Berkeley DB- 入门
1 导言 首先,我们要了解Berkeley DB的一些基本特性,在IBM的开发网站上有篇文章对其有比较清晰的介绍: 这篇文章讲到了BDB的设计思想和核心数据结构.以及数据访问算法:并有常用函数使用范例 ...
- js中的 !!
就是这样:!!variable.哈哈,其实我也是在代码里面看见别人这样用,当时很好奇,所以就搜了一下,哈哈.还真的有很多相关的好文啊.作者是这样说的, 一般用来将后面的表达式转换为布尔型的数据 是不是 ...
- js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
- git学习笔记03-本地git常用操作及原理-文件增删改
1.查看git状态 git status 这个可以告诉我们对git做了哪些操,比如增删改 2.既然我们修改了东西,有的时候想看看修改了什么,毕竟我们的记忆力并不如电脑 git diff 文件名 (默 ...
- iOS - MVC 架构模式
1.MVC 从字面意思来理解,MVC 即 Modal View Controller(模型 视图 控制器),是 Xerox PARC 在 20 世纪 80 年代为编程语言 Smalltalk-80 发 ...
- mysql 大数据量的处理
insert 1.过滤一段时间内重复的数据2.数据缓存起来,批量写入 select1.使用分区表2.主主复制,连接不同的mysql3.建立索引4.定时求平均值,写入一个新的表中
- Service 与 Thread 的区别
很多时候,你可能会问,为什么要用 Service,而不用 Thread 呢,因为用 Thread 是很方便的,比起 Service 也方便多了,下面我详细的来解释一下. 1). Thread:Thre ...