对于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 使用的更多相关文章

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

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

  2. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  3. mustache.js

    mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...

  4. 使用mustache.js 模板引擎输出html

    看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...

  5. 模板引擎mustache.js

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

  6. mustache.js使用基本(三)

    作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> ...

  7. mustache.js基本使用(一)

    作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...

  8. MVC客户端使用 Mustache.js把json数据填充到模版中

    使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Musta ...

  9. vue系列---Mustache.js模板引擎介绍及源码解析(十)

    mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...

  10. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

随机推荐

  1. Android 开发笔记___初级控件之实战__计算器

    功能简单,实现并不难,对于初学者可以总和了解初级控件的基本使用. 用到的知识点如下: 线性布局 LinearLayout:整体界面是从上往下的,因此需要垂直方向的linearlayout:下面每行四个 ...

  2. progress 相关事件 异步 ajax

    loadstart — Fires when the fi rst byte of the response has been received.progress — Fires repeatedly ...

  3. C 程序实现密码隐秘输入 linux系统可执行

    读写用户输入,屏幕不回显 char *getpass( const char *prompt); getpass用于从键盘读取用户输入,但屏幕不回显. 参数prompt为屏幕提示字符. 函数返回值为用 ...

  4. 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  5. Nginx安装、平滑升级与虚拟机配置

    Nginx 高性能HTTP反向代理服务器,也是 LAMP/POP3/SMTP代理服务器 由内核和模块组成,内核通过找配置文件讲客户端请求映射到一个location(location是Nginx配置中的 ...

  6. salesforce零基础学习(八十二)审批邮件获取最终审批人和审批意见

    项目中,审批操作无处不在.配置审批流时,我们有时候会用到queue,related user设置当前步骤的审批人,审批人可以一个或者多个.当审批人有多个时,邮件中获取当前记录的审批人和审批意见就不能随 ...

  7. C#对话框的使用

    [函数] <整型> MessageBox(<字符串> Text, <字符串> Title, <整型> nType,MessageBoxIcon);[函数 ...

  8. 有序GUID

    背景 常见的一种数据库设计是使用连续的整数为做主键,当新的数据插入到数据库时,由数据库自动生成.但这种设计不一定适合所有场景. 随着越来越多的使用Nhibernate.EntityFramework等 ...

  9. 腾讯课堂web零基础

    utf是国际编码 gb2312 国人发明的 gbk 补充集 想看网站源代码可以按F12 <meta name ='keywords' content='设置关键字'> <meta n ...

  10. mysql主从同步+mycat读写分离+.NET程序连接mycat代理

    背景 最近新项目需要用到mysql数据库,并且由于数据量大的原因,故打算采用1主1从(主数据库负责增.删.改操作:从数据库负责查操作)的数据库架构,在实现主从之后还要实现读写分离的代理,在网上搜寻了很 ...