//一 ,基本使用

<!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 模板使用的更多相关文章

  1. mustache模板技术

    一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...

  2. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  3. JS模板引擎-Mustache模板引擎使用实例1-表格树

    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...

  4. mustache模板渲染的基本原理

    mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉. ...

  5. swift 之 mustache模板引擎

    用法: Variable Tags {{name}} 用来渲染值name datas: let data = ["value": "test"] ------- ...

  6. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...

  7. mustache 模板,用于构造html页面内容

    Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...

  8. mustache模板技术(转)

    项目首页:http://mustache.github.com/  项目文档:http://mustache.github.com/mustache.5.html  Demo:  http://mus ...

  9. nodejs+Express中使用mustache模板引擎

    由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...

  10. 在.net 程序中使用Mustache模板字符串

    今天弄了一个配置随着使用环境动态切换的功能,一个基本的思路是: 将配置配置为模板的形式, 根据不同的环境定义环境变量 根据环境变量渲染模板,生成具体的配置 这里面就涉及到了一个字符串模板的功能,关于模 ...

随机推荐

  1. iOS 新浪微博-4.0 OAuth授权

    申请开发者 想要拉到到新浪微博的数据,首先让自己成为开发者.申请成为开发者账号很简单,只要有新浪微博的账号即可. 申请地址:http://open.weibo.com/ 在开发的过程中,我们需要拿到几 ...

  2. c#之根据出生日期获得星座信息

    星座定义如下: 代码如下: public enum Constellation { Aquarius = , // 水瓶座 1.20 - 2.18 Pisces = , // 双鱼座 2.19 - 3 ...

  3. Mysql事务及锁

    一.事务(Transaction)及其ACID属性 事务是由一组SQL语句组成的逻辑处理单元,事务具有以下4个属性,通常简称为事务的ACID属性:1.原子性(Atomicity):事务是一个原子操作单 ...

  4. Maven的特点、优点-功能摘要

    Maven功能摘要 以下是Maven的主要特点: 遵循最佳实践的简单项目设置 - 在几秒钟内启动新项目或模块 所有项目的一致使用 - 意味着新开发人员进入项目的时间不会增加 卓越的依赖管理,包括自动更 ...

  5. 【Linux学习九】负载均衡

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.高并发 随着应用访问量的增加,带来高并发处理问题. 具体有两个: ...

  6. Hive的join表连接查询的一些注意事项

    Hive支持的表连接查询的语法: join_table: table_reference JOIN table_factor [join_condition] | table_reference {L ...

  7. linux常用命令:rm 命令

    昨天学习了创建文件和目录的命令mkdir ,今天学习一下linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所 ...

  8. JDK8的新特性

  9. Linux基础命令---管理组gpasswd

    gpasswd gpasswd指令用来管理组文件“/etc/group”和“/etc/gshadow”,每个组可以设置管理员.组员.密码.系统管理员可以使用-A选项定义组管理员,使用-M选项定义成员. ...

  10. Oracle中字符串连接的实现方法

    1.和其他数据库系统类似,Oracle字符串连接使用“||”进行字符串拼接,其使用方式和MSSQLServer中的加号“+”一样. 例如: SELECT '工号为'||FNumber||'的员工姓名为 ...