一、简单示例

代码:

 1             function show(t) {
2 $("#content").html(t);
3 }
4
5 var view = {
6 title: 'YZF',
7 cacl: function () {
8 return 6 + 4;
9 }
10 };
11 $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

结果:

YZF spends 10

结论:

可以很明显的看出Mustache模板的语法,只需要使用{{和}}包含起来就可以了,里面放上对象的名称。

通过本示例也可以看出,如果指定的属性为函数的时候,不会输出函数里面的内容,而是先执行函数,然后将返回的结果显示出来。

二、不转义html标签

代码:

1             var view = {
2 name: "YZF",
3 company: "<b>ninesoft</b>"
4 };
5 show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

 结果:

结论:

通过这个示例可以看出Mustache默认是会将值里面的html标记进行转义的,但是有时候我们并不需要。

所以这里我们可以使用{{{和}}}包含起来,或者是{{&和}}包含,那么Mustache就不会转义里面的html标记。

三、绑定子属性的值

代码:

1             var view = {
2 "name": {
3 first: "Y",
4 second: "zf"
5 },
6 "age": 21
7 };
8 show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

 结果:

结论:

相信看到第一个示例的时候,就会有人想到能不能绑定子属性,如果你努力看下去了。

那么祝贺你,现在就是解决你的需求的方式,仅仅只需要通过.来使用子属性即可。

四、条件式选择是否渲染指定部分

代码:

1             var view = {
2 person: false
3 };
4 show(Mustache.render("eff{{#person}}abc{{/person}}", view));

 结果:

结论:

问题总是不断,如果我们还需要能够根据我们给的值,决定是否渲染某个部分。

那么现在就可以解决这个问题,当然还要提示的就是不仅仅是false会导致不渲染指定部分。

null,空数组,0,空字符串一样有效。语法上面比较简单,就是使用{{#key}} ... {{/key}}

来控制中间的内容。

五、循环输出

代码:

1             var view = {
2 stooges: [
3 { "name": "Moe" },
4 { "name": "Larry" },
5 { "name": "Curly" }
6 ]
7 };
8 show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

结果:

结论:

仅仅学会上面的方式,大部分地方你都解决了,但是还是会出现麻烦的地方。

就是循环输出,如果你一个一个写,相信会很烦躁,当然Mustache不会让我们失望,

它也给出了如何循环输出的方式,这里是将一个由对象组成的数组输出,如果我们

输出的是数组,就需要使用{{.}}来替代{{name}}。

六、循环输出指定函数处理后返回的值

代码:

 1             var view = {
2 "beatles": [
3 { "firstname": "Johh", "lastname": "Lennon" },
4 { "firstname": "Paul", "lastname": "McCartney" }
5 ],
6 "name": function () {
7 return this.firstname + this.lastname;
8 }
9 };
10 show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

 结果:

结论:

循环输出是有了,但是我们还想后期进行加工。那么这个完全符合你的需要,因为Mustache会将

数组中的值传递给你的函数,输出你函数返回的值。这里我们可以看到最外层是数组,只要在里面

使用函数那么外层的数组就会作为这个函数的参数传递进去。

七、自定义函数

代码:

1             var view = {
2 "name": "Tater",
3 "bold": function () {
4 return function (text, render) {
5 return render(text) + "<br />";
6 }
7 }
8 }
9 show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

 结果:

结论:

上面我们都是用的变量作为节,那么我们现在用函数作为节,会有什么效果呢。

它会调用我们函数返回的函数,将节中间的原始字符串作为第一个参数,默认

的解释器作为第二个参数,那么我们就可以自行加工。

八、反义节

代码:

1 var view = {
2 "repos": []
3 };
4 show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

结果:

结论:

上面我们也用节,但是仅仅只能选择是否输出某个部分。所以这里我们弥补一下。

如果我们使用了{{^和}}来定义节的话,那么这个部分只会在里面的值为空,null,

空数组,空字符串的时候才会显示。那么我们就可以实现了if else的效果了。

九、部分模板

代码:

 1             var view = {
2 names: [
3 { "name": "y" },
4 { "name": "z" },
5 { "name": "f" }
6 ]
7 };
8 var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
9 var name = "<b>{{name}}</b>";
10 show(Mustache.render(base, view, { user: name }));

 结果:

结论:

Mustache虽然节约了很多时间,但是我们定义了很多模板,但是彼此之间无法互相嵌套使用,也会造成繁琐。

所以这里我们还要介绍如何定义部分模板,用来在其他模板里面使用,这里使用其他模板的方式仅仅是{{>templetename}}。

最大的不同就是Mustache.render方法有了第三个参数。

十、预编译模板

代码:

1             Mustache.parse(template);
2 //其他代码
3 Mustache.render(template,view);

结论:

模板既然有好处,也有坏处。就是编译模板需要时间,所以在我们已知会使用某个模板的前提下,我们可以预先编译好这个模板,以便后面的使用。

Mustache(3)的更多相关文章

  1. Mustache(2)

    Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan . ...

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

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

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

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

  4. 《高性能javascript》一书要点和延伸(下)

    第六章 快速响应的用户界面 本章开篇介绍了浏览器UI线程的概念,我也突然想到一个小例子,这是写css3动画的朋友都经常会碰到的一个问题: <head> <meta charset=& ...

  5. 列表组件抽象(2)-listViewBase说明

    这是我写的关于列表组件的第2篇博客.前面的相关文章有: 1. 列表组件抽象(1)-概述 listViewBase是列表组件所有文件中最核心的一个,它抽象了所有列表的公共逻辑,将来如果有必要添加其它公共 ...

  6. 前端MVVM框架设计及实现(二)

    在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...

  7. vue.js慢速入门(1)

    0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例 代码: < ...

  8. Java资源大全中文版(Awesome最新版)(转载)

    原文地址:http://www.cnblogs.com/best/p/5876559.html 目录 业务流程管理套件 字节码操作 集群管理 代码分析 编译器生成工具 构建工具 外部配置工具 约束满足 ...

  9. Backbone.js学习之Backbone.View(视图)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

随机推荐

  1. telnet命令

    详细资料 telnet命令使用方法详解-telnet命令怎么用-win7没有telent怎么办 2017年07月26日 15:37:36 阅读数:1010 什么是Telnet? 对于Telnet的认识 ...

  2. Java程序员到架构师的推荐阅读书籍

    作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...

  3. [Python爬虫] 之二十三:Selenium +phantomjs 利用 pyquery抓取智能电视网数据

    一.介绍 本例子用Selenium +phantomjs爬取智能电视网(http://news.znds.com/article/news/)的资讯信息,输入给定关键字抓取资讯信息. 给定关键字:数字 ...

  4. 【Hadoop】HDFS源码解读

    1.open流程 2.get DFS流程: 3.获取block信息流程

  5. Excel 对应.xml/.ftl 配置(中爆导出范文)

    <?xml version="1.0"?><Workbook xmlns="urn:schemas-microsoft-com:office:sprea ...

  6. LeakCanary 的使用遇到的弯路

    基本上来源是:  http://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ 1. demon 中自带的android_v7兼容包有问题的,建议自己使 ...

  7. PHP+MYSQL的搭建

    如今准备研究下微信的开发,所以要研究下PHP了,但对这个平台还是非常陌生的,所以网上找了些资料并測试,现贴出来给大家參考. 第一步:我们先下载[PHPStudy 2013]或者最新版本号: 下载地址: ...

  8. jbpm4(参数设置)

    1.processDefinition.getDescription() <process name="task_test_2" xmlns="http://jbp ...

  9. wordpress 插件 之 微信自动回复机器人

    微信目前越来越火,wordpress 也拥有众多用户 那我们来写个插件,把两者连起来吧! 目前已经测试完成,下面把相关的信息分享一下. 查看演示 请加我微信公众号 创新实验室,或直接扫描最底下的二维码 ...

  10. Python学习笔记(四)多进程的使用

    python中多进程与Linux 下的C基本相同.   fork的基本使用   先看最简单的例子: # coding: utf-8 import os def my_fork(): pid = os. ...