Mustache 使用心得总结

原创 2014年01月05日 23:49:26

Mustache 使用心得总结

前言:

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

1.  Mustache 概述

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

2.  Mustache 具体的使用

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

 

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

2.1          简单的对象绑定展示

l  代码示例:

 

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

  

l  页面呈现效果:

 

 

l  语法解释:

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

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

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

 

2.2          对象数组循环渲染展示

l  代码示例:

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

l  页面呈现效果:

 

l  语法解释:

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

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

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

 

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

l  代码示例:

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

l  页面呈现效果:

 

l  语法解释:

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

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

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

2.4 防止html转义展示

l  代码示例:

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

l  页面呈现效果:

 

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

 

l  语法解释:

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


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

mustache 的使用

前些日子做个H5嵌入手机的应用,用到了mustache.js,于是就做个如下的简单介绍,如有错误请指出,万分感谢。最后会把项目中的如何用怎么用会贴出部分代码。mustache.js 它是一个javas...
  • w632235548
  • w632235548
  • 2017年01月16日 11:35
  • 1211

mustache语法

转自:http://www.cnblogs.com/DF-fzh/p/5979093.html mustache语法 mustache 模板,用于构造html页面内容。在实际工作中,当同一...
  • St_Sp_En
  • St_Sp_En
  • 2017年05月09日 16:39
  • 238

微信小程序技术分析:Mustache语法要点总结

小程序开发的wxml里,用到了Mustache语法。所以,非常有必要把Mustache研究下。 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用...
  • hugh_Lee
  • hugh_Lee
  • 2017年01月16日 15:06
  • 466

Mustache 使用心得总结

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

Web模板引擎——Mustache

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

js模板引擎库mustache中类似if判断的处理 及handlebars.js

mustache是短小精悍速度超快的js模板引擎库,地址:http://github.com/janl/mustache.js...
  • Joyhen
  • Joyhen
  • 2015年09月21日 11:19
  • 8673

JS模板引擎---mustache与HandleBars

JS模板引擎—mustache与HandleBars以前总听说模板引擎这个东西然而却没有研究过,这两天研究了一下模板引擎,最开始接触了mustache,它是一个客户端的模板引擎。 然后想了解一下服务端...
  • qq243541844
  • qq243541844
  • 2016年07月19日 21:54
  • 1938

Mustache模板技术,一个比freemarker轻量级的模板引擎

一、初识Mustache 同样也是看Dropwizard才知道这个东西的,以前一直是知道诸如freemarker这样的模板引擎,这个是头一次听说,但是听周围的朋友说最早这个东西是出自于JS的,Dro...
  • wangwenjun69
  • wangwenjun69
  • 2015年05月26日 15:16
  • 4499

GRMustache的使用(HTML模板渲染工具)For iOS

GRMustache的使用(HTML模板渲染工具)For iOS   GRMustache是一个类似templateEngine的html渲染工具,可以更加有效的帮助...
  • xiong1081
  • xiong1081
  • 2016年06月06日 17:40
  • 826

UIWebView---iOS中使用模板引擎渲染HTML界面

参考: iOS中使用模板引擎渲染HTML界面   MGTemplateEngine 模版引擎简单使用 在iOS实际的开发中,使用UIWebView来加载数据使用的场景特别多。很多时候我...
  • wsxzk123
  • wsxzk123
  • 2015年02月05日 19:48
  • 2792
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Mustache 使用心得总结
举报原因:
原因补充:

(最多只允许输入30个字)