mustache.js 使用
对于mustache模板,我是属于即用即查的方法,以下记录仅是我常用的方式。方便以后使用时不用再去项目中去找,因为真的不好找。(此处 -->serious 脸)
当需要渲染一些数据列表的时候,使用这个模板是比较快捷的。(具体详情语法看文档)
一.首先需要添加html模板部分。
<script id="template" type="x-tmpl-mustache">
{{#data}} -->列表数据
//此处只是示例,换成需要循环的列表即可
<h3 class="order-num-box">订单号:<span class="order-num">{{payid}}(此处写数据循环列表中的变量名,为了绑定字段中的内容不需要被转义我们可以{{&payid}})</span>
<span class="item-time pull-right">下单时间:{{paytime}}</span>
</h3>
{{/data}}
</script>
二. 获取模板
var tmpl = $('#template').html();
三. 渲染模板
function showRecordData(data) {
Mustache.parse(tmpl);
var rendered = Mustache.render(tmpl, {
dataRecord: data, //数据源 --对象数组
render: function() { //如果有需要根据不同状态或者类型返回不同的值或者html片段时,可以通过函数来实现
if (this.type == 类型值) {
return "...." ;
} else {
return "...";
}
}
});
return rendered; //返回渲染好的html数据。
}
mustache.js 使用的更多相关文章
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- mustache.js
mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...
- 使用mustache.js 模板引擎输出html
看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...
- 模板引擎mustache.js
Javascript模板引擎mustache.js详解 阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
- mustache.js使用基本(三)
作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> ...
- mustache.js基本使用(一)
作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...
- MVC客户端使用 Mustache.js把json数据填充到模版中
使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Musta ...
- vue系列---Mustache.js模板引擎介绍及源码解析(十)
mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
随机推荐
- JDBC(MySQL)一周学习总结(二)
上一篇文章我们总结了获取数据库连接以及操作数据表的一些知识点,本篇将继续上次的文章给大家分享! 1. 上一篇文章我们可以对数据表进行增删改查的操作了,对与一些小项目的部分功能我们也足以胜任.但现在有一 ...
- 蓝桥杯-算法训练--ALGO-4 结点选择
本人是一个刚刚接触C++不久的傻学生~记录一些自己的学习过程.大神路过可以批评指正~ 刚学动态规划,水平还很渣,一下子不知道从何下手,借鉴了一下这位大哥的文章 http://www.cnblogs.c ...
- display:none,float小秘密
一个元素不管是块元素还是行内元素 在添加了 display:none 之后,就变成了不可见的块元素,可以给他添加长度和高度 在float之后内联元素也会隐性成为 inline-block ...
- javascript 中遍历数组的简单方法
在Javascript中有自带方便遍历数组的方法(此方法非彼方法不要误会哦): 1 .利用for( index in array ){}; 2.利用 array.forEach( function(e ...
- Mybatis面试整理
#{}和${}的区别 #{}是预编译处理,${}是字符串替换. Mybatis在处理#{}时,会将sql中的#{}替换为?号,调用PreparedStatement的set方法来赋值: Mybatis ...
- 快速自检电脑是否被黑客入侵过(Windows版)
我们经常会感觉电脑行为有点奇怪, 比如总是打开莫名其妙的网站, 或者偶尔变卡(网络/CPU), 似乎自己"中毒"了, 但X60安全卫士或者X讯电脑管家扫描之后又说你电脑" ...
- C#删除区域实现透明
最近在搞一个图形图像的项目.不知道经理为什么选择了C#语言,但还是要做,呵呵. 在期间出现一个比较难解决的问题如下: 删除当前图层的指定区域用来显示下面图层在这个区域的图像,相当于PS蒙版层的效果. ...
- Mysql Explain 解读(基于MySQL 5.6.36)
Mysql Explain 解读(基于MySQL 5.6.36) 1.语法 explain < table_name > #例子 explain select * from t3 wher ...
- Duilib XML嵌套
duilib使用嵌套xml可以简化代码的书写,有利于模块化的页面布局分解,duilib库的xml嵌套主要有两种方式 方式一.以创建控件的方式嵌套xml 在CreateControl(LPCTSTR p ...
- openvpn部署之快速入门实战+一键部署openvpn脚本
个人原创禁止转载 软件环境: Centos6.9 x64 openvpn-2.4.3-1.el6.x86_64.rpm easy-rsa-2.2.2-1.el6.noarch.rpm #推荐使用 ...