mustache 模板使用
//一 ,基本使用
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<script src="mustache.min.js" ></script>
<style>
ul, li {
list-style: none;
padding: 30px;
}
</style>
</head>
<body onload="loadUser()">
<ul id="target"></ul>
<script id="template" type="x-tmpl-mustache">
<li>{{ name }}</li>
<li>{{ age }}</li>
</script>
</body>
<script>
function loadUser() {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke",age:34});
$('#target').html(rendered);
}
</script>
</html>
//2,对象循环使用
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<script src="mustache.min.js" ></script>
<style>
ul, li {
list-style: none;
padding: 30px;
}
</style>
</head>
<body onload="loadUser()">
<ul id="target"></ul>
<script id="template" type="x-tmpl-mustache">
{{#listData}}
{{name}}
{{/listData}}
</script> </body>
<script>
function loadUser() {
var obj = [
{
"name": "名称1",
"id": 1,
"age": "23",
},
{
"name": "名称2",
"id": 2,
"age": "23",
},
{
"name": "名称3",
"id": 3,
"age": "23",
}
];
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {"listData":obj}); $('#target').html(rendered);
} </script>
</html>
mustache 模板使用的更多相关文章
- mustache模板技术
一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...
- Swagger结合mustache模板生成后台接口代码、以及前后台建模代码
之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...
- JS模板引擎-Mustache模板引擎使用实例1-表格树
1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...
- mustache模板渲染的基本原理
mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉. ...
- swift 之 mustache模板引擎
用法: Variable Tags {{name}} 用来渲染值name datas: let data = ["value": "test"] ------- ...
- Mustache模板引擎
Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...
- mustache 模板,用于构造html页面内容
Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...
- mustache模板技术(转)
项目首页:http://mustache.github.com/ 项目文档:http://mustache.github.com/mustache.5.html Demo: http://mus ...
- nodejs+Express中使用mustache模板引擎
由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...
- 在.net 程序中使用Mustache模板字符串
今天弄了一个配置随着使用环境动态切换的功能,一个基本的思路是: 将配置配置为模板的形式, 根据不同的环境定义环境变量 根据环境变量渲染模板,生成具体的配置 这里面就涉及到了一个字符串模板的功能,关于模 ...
随机推荐
- GIS 网站 参考网站
GIS 网站 参考:https://malagis.com/arcgis-operate-videos-example-38-summary.html
- Css预处理器---Less(三)
四.Color函数 1.less提供的颜色运算函数,颜色会被转换成HSL色彩空间,然后再通道级别进行操作,函数如下: lighten(@color, 10%); //return a color wh ...
- Git常用的命令
常用 Git 命令清单 作者: 阮一峰 日期: 2015年12月 9日 原文地址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.ht ...
- orm查询语法参考文章
1.参考博客 http://blog.csdn.net/OyangYujun/article/details/45938905 ORMLite完全解析(三)官方文档第三章.自定义查询构造器 Custo ...
- 通过改hosts访问wikipedia
能访问https://www.wikipedia.org 大部分时候我们是可以访问的wikipedia的主页或是英文首页的,但中文页面却经常被墙,这时候你可以通过在命令行下ping www.wikip ...
- IFrame session(转)
问题场景: 在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.( ...
- css解决无论页面长短footer永远置底
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- spiderUI窗口过小解决
复制以下代码,直接替换此css样式即可: C:\Users\Administrator\AppData\Local\Programs\Python\Python37\Lib\site-packages ...
- python isinstance()方法的使用
1. 描述Python中的 isinstance() 函数,是Python中的一个内置函数,用来判断一个函数是否是一个已知的类型,类似 type(). 2. 语法isinstance(object,c ...
- 外网上传到NAS速度很慢是什么情况?上行1M都不到,但是测试有4M
外网上传到NAS速度很慢是什么情况?上行1M都不到,但是测试有4M NAS可以将自己的影片,图片,音乐都放在NAS中.在家中就能无线共享了.在其他地方要下载自己nas里的影片,下载速度主要取决于家里宽 ...