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

相关推荐

  • datagrip安装教程与激活 3月最新注册码

    datagrip安装教程与激活 3月最新注册码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Java 数据库image型输出图片

    有一些程序在sqlserver中存储图片的方式是通过二进制存储导数据库的,那么保存进去之后,怎么把图片显示出来呢?直接上代码,servlet后台代码:byte[]b1=””;//数据库查询出来的二进制InputStreamin=newByteArrayInputStream(b1);response.setContentType(“image/jpg”);Outpu…

  • 【C语言】4种方法求最大公约数和最小公倍数及比较它们的运行时间

    【C语言】4种方法求最大公约数和最小公倍数及比较它们的运行时间一、题目要求利用辗转相除法、穷举法、更相减损术、Stein算法求出两个数的最大公约数或者/和最小公倍数。最大公约数:指两个或多个整数共有约数中最大的一个。例如:【12和24】12的约数有:1、2、3、4、6、12;24的约数有:1、2、3、4、6、8、12、24。它们共有的约数为:1、2、3、4、6、12,则12和24的最大公约数为12…

  • python汉洛塔_汉诺塔python用递归实现

    python汉洛塔_汉诺塔python用递归实现第一步代码:importturtleclassStack:def__init__(self):self.items=[]defisEmpty(self):returnlen(self.items)==0defpush(self,item):self.items.append(item)defpop(self):returnself.items.pop()defpeek(…

    2022年10月12日
  • Linux 常用的zip压缩和解压命令详解

    Linux 常用的zip压缩和解压命令详解前言  嗨,大家好,又与大家见面了,感谢大家在2021年的陪伴,让我们在2022年继续一路前行。相信很多小伙伴在使用Linux系统中经常对文件进行或者文件夹进行操作,不像在Windows中可以使用可视化的工具对文件和文件夹进行压缩和解压操作,那么本次与大家一起学习Linux下zip和unzip的压缩和解压命令,并熟悉常用的参数介绍。常用命令  相信很多对于有一定Linux基础的小伙伴,常用的压缩有:zip、unzip、tar、gzip、bzip2等常用的命令,下面开始zip和unzip使用方法和参数详

  • mysql的反引号怎么打出来_sql注入绕过单引号

    mysql的反引号怎么打出来_sql注入绕过单引号反引号是个比较特别的字符,下面记录下怎么利用0x00SQL注入反引号可利用在分隔符及注释作用,不过使用范围只于表名、数据库名、字段名、起别名这些场景,下面具体说下1)表名payload:select*from`users`whereuser_id=1limit0,1;可以正常执行的,这样使用还可以起到分隔符的作用,如下eg:select*from`users`whereuse…

    2022年10月29日

发表回复

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

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