Mustache 使用总结

前言:

  在分析 jeesite 项目的时候,看到了 Mustache,于是查了下

正文:

1、Mustache 概述

  Mustache 是基于 JavaScript 实现的模板引擎,即用来 渲染前台页面,轻量级,语法简单易用

2、Mustache 使用方法

  1) 网上下载 Mustache.js 和 jquery.js (Git hub 上获取),在页面中引入

  2) 简单的对象绑定展示  

    代码展示:

<script>
$(function(){
    var user = {name:"panie",age:25,sex:"girl"};
    var template = "My name is {{name}},I‘m {{age}},Sex is {{sex}} ";
    var view = Mustache.render(template,user);
    $("#userinfo").html(view);
});
</script>

    页面呈现效果:

    语法解释:

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

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

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

参考链接:http://blog.csdn.net/xuemoyao/article/details/17896203

时间: 2024-08-08 09:38:18

Mustache 使用总结的相关文章

mustache模板简单应用

一.简单的对象 数据: data={ name:"张三", money:29 } 模板: Hello {{name}} You have just won {{money}} dollars! 二.list 循环 data = { list: [ { title: "最新新闻1", autor: { name: "小小", date: "2017-6-23" }, isdel:true }, { title: "最新

mustache模板

古人学问无遗力,少壮工夫老始成.纸上得来终觉浅,绝知此事要躬行. 一.简单示例 代码: 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var view = { 6 title: 'YZF', 7 cacl: function () { 8 return 6 + 4; 9 } 10 }; 11 $("#content").html(Mustache.render("{{title}} spends

mustache模板引擎

Logic-less templates. github:http://mustache.github.com/ 文档:http://mustache.github.com/mustache.5.html http://mustache.github.io Java 版 Mustache SVN 源码 http://jmustache.googlecode.com/svn mustache 类似  freemark和valicity 模板引擎,不过mustache 更轻量级,支持语言: Ruby

Mustache 使用心得总结

前言: 之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总结一下,刚好上周项目里又用到这个轻量型的渲染模版,真心感觉很好用,因此就总结一下使用心得,算是一个入门级别的指引吧. 1.  Mustache 概述 Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手. 2.  Mustache 具体的使用 下面就具体讲一下Mustache的使用.在开始讲之前,需要先从git hub上

Mustache应用——渲染二级菜单

# var data = [ { code: "1", parentCode: "0", name: "水果" }, { code: "2", parentCode: "1", name: "苹果" }, { code: "3", parentCode: "1", name: "桔子" }, { code: "4&qu

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

小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nickName}},这里的{{ }}就是Mustache的语法. 1.Mustache的模板语法很简单,就那么几个: {{keyName}} {{{keyN

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

MVC Model public class StudentModel { [Key] public int StuId { get; set; } [Display(Name = "姓名")] [StringLength(50)] [Required(ErrorMessage = "姓名必填")] public string StuName { get; set; } [StringLength(250)] [Display(Name = "住址&quo

Js模板引擎mustache

mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起 目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前

mustache.js使用基本(三)

作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> address}}: 当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块,例如: */ var data = { "company": "Apple", "address": { "street": "