//一 ,基本使用

<!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. 
						
  2. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码
		
    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...
    
		
    3. 
						
  3. JS模板引擎-Mustache模板引擎使用实例1-表格树
		
    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...
    
		
    4. 
						
  4. mustache模板渲染的基本原理
		
    mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉. ...
    
		
    5. 
						
  5. swift 之 mustache模板引擎
		
    用法: Variable Tags {{name}} 用来渲染值name datas: let data = ["value": "test"] ------- ...
    
		
    6. 
						
  6. Mustache模板引擎
		
    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...
    
		
    7. 
						
  7. mustache 模板，用于构造html页面内容
		
    Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...
    
		
    8. 
						
  8. mustache模板技术(转)
		
    项目首页:http://mustache.github.com/  项目文档:http://mustache.github.com/mustache.5.html  Demo:  http://mus ...
    
		
    9. 
						
  9. nodejs+Express中使用mustache模板引擎
		
    由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...
    
		
    10. 
						
  10. 在.net 程序中使用Mustache模板字符串
		
    今天弄了一个配置随着使用环境动态切换的功能,一个基本的思路是: 将配置配置为模板的形式, 根据不同的环境定义环境变量 根据环境变量渲染模板,生成具体的配置 这里面就涉及到了一个字符串模板的功能,关于模 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. android studio 编译sdk版降低报错解决方法
			
    解决办法如下: 步骤1:在gradle中修改 compile sdk 版本,比如 8. 步骤2:在gradle中删除v7包的依赖 步骤3:在manifest中修改theme,supportsRtl.t ...
    
			
    2. 
						
  2. Windows jmeter配置
			
    JMeter是Apache软件基金会的产品,用于对提供静态的和动态的资源服务器性能的测试.是一款很方便的测试软件. JMeter 要依附Java SE 环境 所以在启用JMeter之前要安装JAVA  ...
    
			
    3. 
						
  3. 使用Pytorch进行图像分类，AI challenger 农作物病害分类竞赛源码解读
			
    1.首先对给的数据进行划分,类型为每个类单独放在一个文件夹中 import json import shutil import os from glob import glob from tqdm i ...
    
			
    4. 
						
  4. ActiveMQ之spring集成消息转换器MessageConverter
			
    MessageConverter的作用主要有两方面,一方面它可以把我们的非标准化Message对象转换成我们的目标Message对象,这主要是用在发送消息的时候:另一方面它又可以把我们的Message ...
    
			
    5. 
						
  5. python pandas模块,nba数据处理（1）
			
    pandas提供了使我们能够快速便捷地处理结构化数据的大量数据结构和函数.pandas兼具Numpy高性能的数组计算功能以及电子表格和关系型数据(如SQL)灵活的数据处理能力.它提供了复杂精细的索引功 ...
    
			
    6. 
						
  6. [转]js刷新父窗体
			
    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法   <script language=JavaScript>       parent.location.reload(); ...
    
			
    7. 
						
  7. AssetBoundle加载非预设资源
			
    1.定义一个协程LoadNonObjFromAB IEnumerator LoadNonObjFromAB(string ABURL, GameObject go, string assetName) ...
    
			
    8. 
						
  8. HighCharts学习笔记（一）
			
    HighChars基本概述 Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求. 开始使用chart之前进行配置 全局配置: Highcharts.setOptions( ...
    
			
    9. 
						
  9. Sitecore CMS中配置模板部分
			
    如何在Sitecore CMS中配置模板部分. 注意: 本教程将扩展于“Sitecore CMS中创建模板”的章节. 配置折叠状态 配置模板部分的折叠状态允许用户选择默认折叠或展开哪些模板部分.此设置 ...
    
			
    10. 
						
  10. Differencia (归并树)
			
    归并树,与我们原学过的归并排序是一样的原理,但是在那个的基础上进行扩展应用.首先每个节点储存了它每个节点所代表的点的有序序列,还有就是每个点里面包含的所有的b[i]在左右子树的排名辅助更新数据,还有一 ...
    
			
    11.