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使用笔记(内容属于转载总结)的更多相关文章

  1. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  2. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  3. Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化

    Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...

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

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

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

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

  6. 前端基础系列——CSS规范(文章内容为转载)

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

  7. 模板引擎mustache.js

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

  8. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  9. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

随机推荐

  1. C堆栈

    C堆栈实现的表达式求值 //Luangeng #include<stdio.h> #include<conio.h> #include<windows.h> #de ...

  2. 3.linux man手册

    (12) man作用:查询man手册,获得帮助信息man 1 ls 1表示查询的是linux命令man 2 xxx 2表示查询的是linux apiman 3 xxx 3表示查询的是C库函数注意:在m ...

  3. dual,rowid,rownum

    一. dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 s ...

  4. BZOJ 3144 切糕(最小割)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3144 题意: 思路:我们假设没有那个D的限制.这样就简 单了.贪心的话,我们只要在每一个 ...

  5. Spring MVC无法获取ajax POST的参数和值

    一.怎么会这个样子 很简单的一个想法,ajax以POST的方式提交一个表单,Spring MVC解析.然而一次次的打印null折磨了我整整一天…… 最后的解决现在看来是很明显的问题,“只是当时已惘然” ...

  6. Spring注解【非单例】

    花了至少一整天的时间解决了这个问题,必须记录这个纠结的过程,问题不可怕,思路很绕弯. 为了能说清楚自己的问题,我都用例子来模拟. 我有一个类MyThread是这样的: @Service public ...

  7. hdu 4883 思维题

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4883 TIANKENG’s restaurant Time Limit: 2000/1000 MS (Ja ...

  8. Redis事务的分析及改进

    Redis事务的分析及改进 Redis的事务特性 数据ACID特性满足了几条? 为了保持简单,redis事务保证了其中的一致性和隔离性: 不满足原子性和持久性: 原子性 redis事务在执行的中途遇到 ...

  9. 第一发。。。codeforces 609 C Load Balancing 贪心

    /*题意:给你一个序列经过最小变换,变换一次为一个数+1,一个数-1,使得最大值与最小值相差1:思路:与最后得到的序列相差的sum/2:*/#include<iostream> #incl ...

  10. git学习笔记12-标签管理-版本

    发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...