mustache.js基本使用(一)
作者:zccst
模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因。
再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续学习,希望这次能够更深入一些。
这次学习的是mustache.js,他的理念是让模板尽量保持简单,甚至连基本的逻辑判断都不需要用。
本文基本要点:
1,基本用法
2,使用模板(写在页面或异步获取)
3,集中变量定义
官方地址:https://github.com/janl/mustache.js
以下是公共文件
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
$(function(){
...
});
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
1,最基础的用法
var template = '{{title}} spends {{calc}}';
var obj = {
title: "Joe",
calc: function () {
return 2 + 4;
}
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
2,还可以使用模板
总结:两个基本素材:template, obj。前者和后者都可以简单,也可以复杂
Mustache替换:var result = Mustache.render(template, obj);
渲染到页面:$("xxID").html(result);
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);
3,template除了直接赋值和来自页面外,还可以异步获取。
var obj = {};
$.get('template.mst', function(template){
var result = Mustache.render(template, obj);
$("xxID").html(result);
});
总结:template有三种来源:
(1)直接字符串
(2)本页面中带ID的script
(3)异步获取
4,几种变量
最基本变量 :{{ company }}
原样输出变量:{{{ company }}}或{{ &company }}
嵌套用点变量:{{name.first}} {{name.last}}
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}}以>开始表示子模块,如{{> ...
- 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编写,压缩后 ...
随机推荐
- linux cat more less head tail
cat 命令: cat filename 查看一个文件的内容cat[选项][文件]... -b 对非空白行进行编号,行号从1开始-n 和nl命令差不多,对所有行(包括空白行)进行编号输出显示-E ...
- 关于Spring的69个面试问答——终极列表
本文由 ImportNew - 人晓 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会 ...
- sql/plus 常用操作
一.sys用户和system用户Oracle安装会自动的生成sys用户和system用户(1).sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户 ...
- linux视频学习7(ssh, linux启动过程分析,加解压缩,java网络编程)
回顾数据库mysql的备份和恢复: show databases; user spdb1; show tables; 在mysql/bin目录下 执行备份: ./mysqldump -u root - ...
- Trie/Xor
题目链接 /*有一个数组a1,a2,a3--an.找到一个连续子段[l,r],使得al ^ al+1 ^--^ ar达到最大. 一般思路:维护前缀异或+暴力: for(int i=1;i<=n; ...
- Monad / Functor / Applicative 浅析
前言 Swift 其实比 Objective-C 复杂很多,相对于出生于上世纪 80 年代的 Objective-C 来说,Swift 融入了大量新特性.这也使得我们学习掌握这门语言变得相对来说更加困 ...
- asp读取指定目录下的文件名
bianli(Server.MapPath("/")+"\pic") InStrRev("abcd.jpg", ".") ...
- HDU 1204 基础DP 非连续字段的最大和
其实这个感觉是一眼题,只不过我真心太菜了. 题目已经告诉你了,有m段,n个数字,那么我们就只需要dp[m][n]即可,然后最后的答案肯定是dp[m][]的那一行,所以其他行都是没有用的,因为我们可以把 ...
- the.book.of.gimp.pdf文字不显示
逆天了,不是中文也不显示. https://bugs.freedesktop.org/show_bug.cgi?id=70529 说要升级libfreetype,可是已经是wheezy最新了,其他不稳 ...
- 转 Android HTTPS详解
目录(?)[-] 前言 HTTPS原理 SSLTLS协议作用 基本的运行过程 握手阶段的详细过程 客户端发出请求ClientHello 服务器回应ServerHello 客户端回应 服务器的最后回应 ...