Mustache 使用心得总结

前言:

之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总结一下,刚好上周项目里又用到这个轻量型的渲染模版,真心感觉很好用,因此就总结一下使用心得,算是一个入门级别的指引吧。

1.  Mustache 概述

Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。

2.  Mustache 具体的使用

下面就具体讲一下Mustache的使用。在开始讲之前,需要先从git hub上获取相关的mustache.js文件,获取文件之后,新建一个解决方案,目录如下:

然后就开始具体的使用,首先需要在页面的head标签内引用Jquery.js 和Mustache.js两个脚本文件,主要有以下几个方面(以下演示的方法均在head标签中的script代码块中):

2.1          简单的对象绑定展示

代码示例:

$(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);

  

页面呈现效果:

语法解释:

i.              Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}”;

ii.              大括号内的字段名称要和Mustache.render方法中的第二个参数中的对象的属性名一致

iii.              主要的渲染方法为Mustache.render,该方法有两个参数,第一个为要渲染的模版,也就是上例中的template,第二个就是数据源也就是上例中的user对象

2.2          对象数组循环渲染展示

代码示例:

 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);

页面呈现效果:

语法解释:

i.              对于对象数据Mustache也有其特殊的语法:{{#}}{{/}},如果所给定的数据源是一个对象数组,则可以使用该语法,很方便的用来循环展示。

ii.              其中{{#}}标记表示从该标记以后的内容全部都要循环展示

iii.              {{/}}标记表示循环结束。这种情况多用于table行的展示。

2.3          判断对象为null(false/undefined)展示

代码示例:

  var users = { result: [{ name: null, 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}}{{name}}</td><td>{{age}}</td><td>{{sex}}{{/name}}</td></tr>{{/result}}</table><div>";
var views = Mustache.render(template, users);
$("#users_info1").html(views);

页面呈现效果:

语法解释:

i.              上边我们有讲到{{#}}{{/}}这样的语法,除了上边的循环遍历之外,它还有另外的一层意思就是判空,如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现

ii.              在代码示例中,users对象中的第一个对象名为null,所以在展示时,该条用户信息没有被展示。

iii.              有了判空的方法当然还有与之相反的方法{{^}},该方法表示的意思与{{#}}意思相反。

2.4 防止html转义展示

代码示例:

var user = { name: "<h1>Olive</h1>" };
var template = "my name is {{&name}}";
var view = Mustache.render(template, user);
$("#user_name").html(view); 

页面呈现效果:

如果不在{{}}中加&,则效果如下:

语法解释:

i.              在某些时候,我们要绑定的数据源中可能会有一些html标记,如果单纯的采用{{}}这种方式来绑定的话,默认的会将html标记转义。为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。

好了,今天就总结到这里了,希望能给大家一些帮助。

Mustache 使用心得总结的更多相关文章

  1. [转]Mustache 使用心得总结

    原文地址:https://blog.csdn.net/xuemoyao/article/details/17896203 前言: 之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总 ...

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

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

  3. 比較Backbone.js, Angular.js, Ember.js, Knockout.js 心得

    還記得第一次寫網站的時候,我無意間寫成了 SPA(single page application),當時還沒有SPA這個詞,後來因為廣告主需要不同 url location 頁面的廣告展示,只好把部分 ...

  4. Js模板引擎mustache

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

  5. 模板引擎mustache.js

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

  6. Mustache 使用说明

    Mustache 使用说明 最近在升级SinGooCMS到MVC架构.管理前端使用了Mustache模板,把使用心得记录一下! 一.官网http://mustache.github.io/https: ...

  7. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  8. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  9. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. windows防火墙命令详解

    Old command 针对win7以下版本<包含win7> Example 1: 启用一个程序 Old command New command netsh firewall add al ...

  2. 【堆栈应用一】一个数divided=几个最小质因数的乘积(时间复杂度On)

    此算法由LQD提供

  3. [转]CSS,font-family,常用网页字体

    http://www.zreading.cn/ican/2014/10/css-font-family/ CSS,font-family,好看常用的中文字体 2014-10-14 例1(小米米官网): ...

  4. linux 的 磁盘操作

    //显示目录和文件 以kb m g为单位 du -ah //总大小 du -sh /etc //查看分区 fdisk -l //对磁盘进行分区 fdisk /dev/sdb //格式化分区 mkfs ...

  5. iOS开发UI篇—直接使用UITableView Controller

    iOS开发UI篇—直接使用UITableView Controller 一.一般过程 // // YYViewController.h // UITableView Controller // // ...

  6. BestCoder Round #43

    T1:pog loves szh I(hdu 5264) 题目大意: 给出把AB两个字符串交叉拼起来的结果,求出原串. 题解: 不解释..直接每次+2输出. T2:pog loves szh II(h ...

  7. wp8.1 Study19:通知

    一.通知形式 在windowsphone系统中,通知有很多中形式,如下图 (Tile磁贴在前一博文已复习过,Badge形式与tile类似) 1.Toast 它主要是利用xml文件来编写的,xml代码如 ...

  8. golang——slice使用摘要

    1.slice因capacity不足而重新分配的underlying array与原本的array空间是断裂的,就是说这是原本指向的空间没变,如下 arr := [...]int{1, 2, 3, 4 ...

  9. [CDN]CDN的系统架构

    ---恢复内容开始--- 1.功能架构: CDN技术自1998年诞生以来,伴随着互联网的高速发展,其技术一直在持续演进和完善,但基本的CDN功能架构在2003年左右就已基本形成和稳定下来.从功能上划分 ...

  10. [安卓]应用程序资源(App Resources)

    谷歌推荐我们,在开发安卓系统应用程序的时候,要把资源从代码中分离出来,这样便于我们单独维护它们.采取分离的资源设计,我们还可以提供可选资源,支持特定的设备配置譬如不同的语言或屏幕尺寸,随着越来越多的A ...