Mustache 使用心得总结

Mustache 使用心得总结

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

Mustache 使用心得总结此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

Mustache 使用心得总结

前言:

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

1.  Mustache 概述

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

2.  Mustache 详细的使用

以下就详细讲一下Mustache的使用。在開始讲之前,须要先从git hub上获取相关的mustache.js文件,获取文件之后,新建一个解决方式,文件夹例如以下:

Mustache 使用心得总结 

然后就開始详细的使用,首先须要在页面的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  页面呈现效果:

 

Mustache 使用心得总结 

l  语法解释:

                         i.              Mustache的语法非常easy,用两个大括号标记要绑定的字段就可以,“{{}}”;

                       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  页面呈现效果:

Mustache 使用心得总结 

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  页面呈现效果:

Mustache 使用心得总结 

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  页面呈现效果:

Mustache 使用心得总结 

假设不在{{}}中加&,则效果例如以下:

Mustache 使用心得总结 

l  语法解释:

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


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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117961.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • html attrs属性,在Vue中详细介绍$attrs属性

    html attrs属性,在Vue中详细介绍$attrs属性这篇文章主要给大家介绍了关于Vuev2.4中新增的$attrs及$listeners属性的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着我来一起学习学习吧。前言多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用vuex处理,未免有点杀鸡用牛刀。Vue2.4版本提供了另一种方法,使用…

    2022年10月17日
  • 重启nginx报错解决办法[通俗易懂]

    重启nginx报错解决办法[通俗易懂]一、nginx:[error]open()“/usr/local/nginx/logs/nginx.pid”failed(2:Nosuchfileordirectory)错误问题场景服务器重启后,重启nginx时报错nginx:[error]open()“/usr/local/nginx/logs/nginx.pid”failed(2:Nosuchfileordirectory),进入到logs目录发现确实没有nginx.pid文件解决办法使用指定ngin

  • 学习MySQL这一篇就够了

    第一章数据库概述1.1、数据库的好处将数据持久化到本地提供结构化查询功能1.2、数据库的常见概念DB:数据库,存储数据的仓库DBS:数据库管理系统,又称为数据库软件或者数据库产品,用于创建和管理DB,常见的有MySQL、Oracle、DB2、SQLServerSQL:结构化查询语言,用于和数据库通信的语言,不是某个数据库软件特有的,而是几乎所有的主流数据库软件通用的语言1.3、数据库的存储特点数据存放到表中,然后表再放到库中一个库中可以有多张表,每张表具有唯一的表名用来标识

  • int什么数据类型_int16是什么数据类型

    int什么数据类型_int16是什么数据类型int16,int32,int64等类型的区别Int16意思是16位整数(16bitinteger),相当于short占2个字节。Int32意思是32位整数(32bitinteger),相当于int占4个字节。Int64意思是64位整数(64bitinterger),相当于longlong占8个字节。…

  • 归并排序算法详细图解_归并排序算法详解

    归并排序算法详细图解_归并排序算法详解一、什么是归并排序1.概念归并排序(Mergesort)是建立在归并操作上的一种有效的排序算法,归并排序对序列的元素进行逐层折半分组,然后从最小分组开始比较排序,合并成一个大的分组,逐层进行,最终所有的元素都是有序的2.算法原理这是一个无序数列:4、5、8、1、7、2、6、3,我们要将它按从小到大排序。按照归并排序的思想,我们要把序列逐层进行拆分序列逐层拆分如下然后从下往上逐层合并,首先对第一层序列1(只包含元素4)和序列2(只包含元素5)进行合并创建一个大序列,序列长度为两个小序列长度

    2022年10月20日
  • uwsgi php,Nginx+uWSGI[通俗易懂]

    uwsgi php,Nginx+uWSGI[通俗易懂]基于python的web项目,常见的部署方法有:fcgi:用spawn-fcgi或者框架自带的工具对各个project分别生成监听进程,然后和http服务互动。wsgi:利用http服务的mod_wsgi模块来跑各个project。不过还有个uwsgi,它既不用wsgi协议也不用fcgi协议,而是自创了一个uwsgi的协议,据作者说该协议大约是fcgi协议的10倍那么快。uWSGI的主要特点如下:…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号