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 οnlοad="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 οnlοad="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>
 



 

转载于:https://www.cnblogs.com/zhaozhenzhen/p/8795891.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/398320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sphinx编译docs文档

在使用Python、Django的过程中&#xff0c;经常看到docs目录&#xff0c;里面存放着一些txt文本文件&#xff0c;也就是自带的一些帮助文档&#xff0c;里面有make.bat&#xff0c;在dos目录下直接执行make&#xff0c;给出的帮助是可以转换成Html、PDF等文件形式&#xff0c;那…

js传参不是数字_js调用函数时传入的参数个数与函数定义时的参数个数不符时的操作...

1.在js中函数没有重载的概念&#xff0c;如果声明了多个重名的函数&#xff0c;不管函数的形参个数是否一样&#xff0c;只有最有一个有效&#xff0c;其他的函数声明都是无效的。比如说声明了两个函数fn()&#xff0c;第一次声明时没有形参&#xff0c;第二次声明时形参有两个…

精妙SQL语句收集(转)

SQL语句先前写的时候&#xff0c;很容易把一些特殊的用法忘记&#xff0c;我特此整理了一下SQL语句操作。 一、基础 1、说明&#xff1a;创建数据库 CREATE DATABASE database-name 2、说明&#xff1a;删除数据库 drop database dbname 3、说明&#xff1a;备份sql serv…

原生JS字符串操作方法汇总

1.转换为字符串类型(三种实现方式) 1 var num110; 2 var mystrnum.toString(); //"110" 3 4 var num111; 5 var mystrString(num); //"111" 6 7 var num112; 8 var mystr"" num; //"112" 2.字符串分割返回新的数…

解决问题:修改tomcat启动后服务器url

解决问题&#xff1a;修改tomcat启动后服务器url 解决方式&#xff1a;通过在pom.xml配置文件中使用configuration标签的子标签path可以修改http://localhost:8080后跟什么路径。如path标签中为/&#xff0c;则tomcat启动后服务器url为http://localhost:8080/

用js来实现那些数据结构 第一章

在开始正式的内容之前&#xff0c;不得不说说js中的数据类型和数据结构&#xff0c;以及一些比较容易让人混淆的概念。那么为什么要从数组说起&#xff1f;数组在js中是最常见的内存数据结构&#xff0c;数组数据结构在js中拥有很多的方法&#xff0c;很多初学者记不清数组的大…

excel密码忘记了怎么办

2019独角兽企业重金招聘Python工程师标准>>> Excel电子表格应用程序堪称Office中的“王牌应用”&#xff0c;能够快速灵活地整理各种大数据&#xff0c;在各行各业中发挥着不可替代的作用。因此&#xff0c;excel文档的跋扈密码比其他文档多&#xff0c;除了常设的打…

关于Android定制Launcher

好久没有做Adroid项目开发了&#xff0c;临时需要开发一个APK. 客户要求该APK作为launcher存在&#xff0c;折腾了一些时间&#xff0c;特此记录以免忘了。 按照网络上的要求&#xff0c;添加 <category android:name"android.intent.category.DEFAULT" /> …

Android2.2 API 中文文档系列(3) —— AccessibilityService

前言 关键字&#xff1a; Android API 中文,Android SDK 中文,Android AccessibilityService 详解 本章翻译来自 java_cofi &#xff0c;他的博客地址&#xff1a;http://java-cofi.javaeye.com/admin&#xff0c;这里本博负责整理和发布&#xff0c;欢迎其他译者一起参与Andro…

rest风格使用两个变量_为什么要用Rest风格,接口应该怎么定义,除了Rest还可用什么方式写接口的?...

这里是修真院后端小课堂&#xff0c;每篇分享文从深度思考中的知识点——为什么要用Rest风格&#xff0c;如果不用Rest的话&#xff0c;接口应该怎么定义&#xff0c;在使用Rest风格之前&#xff0c;大家都是用什么方式写接口的&#xff1f;1.背景介绍REST(Representational St…

Smobiler 4.4 更新预告 Part 1(Smobiler能让你在Visual Studio上开发APP)

在4.4版本中&#xff0c;大家对产品优化的一些建议和意见进行了相应的优化和修复&#xff0c;同时&#xff0c;还新增了一些令人激动的功能和插件。 下面先为大家介绍4.4版本中Smobiler的优化和修复&#xff1a; 优化 1&#xff0c; PageView的AutoPlay默认属性改为True。 2&am…

cad lisp 二次抛物线_学习CAD的五个段位,你是青铜还是王者?

大家学习AutoCAD多久了&#xff0c;从入门到精(fang)通(qi)&#xff0c;小编总结了5个段位&#xff0c;大家对号入座。此时视口内的三维实体并没有任何变化&#xff0c;需要后续使用soldraw才能进行转换。SOLVIEW创建的视口经过SOLDRAW处理后&#xff0c;会生成表示实体轮廓和边…

Python 基础知识(二)

一、基础数据类型 1、数字int 数字主要是用于计算用的&#xff0c;使用方法并不是很多&#xff0c;就记住一种就可以&#xff1a; #bit_length() 当十进制用二进制表示时&#xff0c;最少使用的位数 # -*- coding:UTF-8 -*- v 11 data v.bit_length() print(data) # 二进制&a…

深入理解JavaWeb(五)——过滤器和监听器

深入理解JavaWeb&#xff08;五&#xff09;——过滤器和监听器 摘要&#xff1a;在基于Java-Web核心技术的开发应用中&#xff0c;为了一些特定的用途或目的&#xff0c;那么Filter和Listener就要闪亮登场了。在本文中我们来聊一聊Servlet规范中的另俩技术的核心知识点&#x…

G - 娜娜梦游仙境系列——梦醒

G - 娜娜梦游仙境系列——梦醒 Time Limit:2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Special JudgeProblem Description 娜娜离开了这个王国&#xff0c;走向远方&#xff0c;在旷野上&#xff0c;娜娜看到了一个大时钟&#xff0c;上面的…

DB2 常用操作命令集合

1、 打开命令行窗口 #db2cmd 2、 打开控制中心 # db2cmd db2cc 3、 打开命令编辑器 db2cmd db2ce 操作数据库命令 4、 启动数据库实例 #db2start 5、 停止数据库实例 #db2stop 如果你不能停止数据库由于激活的连接&#xff0c;在运行db2stop前执行db2 force applica…

vue-resource跨域问题

如果是cli 就在config/index.js配置proxyTable proxyTable: {/login: {target: http://192.168.0.240:8888,changeOrigin: true,pathRewrite: {^/login:}}}, 转载于:https://www.cnblogs.com/GuGuT3T/p/8807923.html

ps一点等于多少厘米_劝告大家:女人40岁后,体重多少算正常?太瘦也不好

阅读本文前&#xff0c;请您先点击上面的“蓝色字体”&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到文章了。每天都有分享&#xff0c;完全是免费订阅&#xff0c;请放心关注。由于身高、骨骼、体型和体重的不同&#xff0c;与男性相比&#xff0c;女性将相…

【GitLab】CentOS安装GitLab最佳实践

环境 [rootiZ2851te7e5Z ~]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch Distributor ID: CentOS Description: CentOS Linux release 7.1.1503 (Core) Release: 7.1.1503 Codename: Core服务器安装了 PHP7Nginx,占用80端口Mysql安装 安装采用官…

java xml转map_java练习本(原每日一练)(20190514)

名人名言昨日翻译“The No. 1 reason people fail in life is because they listen to their friends, family, and neighbors.”——Napoleon Hill“人们生活中失败的第一个原因是他们听取朋友、家人和邻居的意见。”——拿破仑希尔今日名言“Your time is limited, so don’t…