mustache 模板使用

最新推荐文章于 2022-05-28 13:48:59 发布
最新推荐文章于 2022-05-28 13:48:59 发布
阅读量286 收藏
点赞数
原文链接：http://www.cnblogs.com/zhaozhenzhen/p/8795891.html
版权

//一 ,基本使用

<!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

                

        

        




    




    

      

        

            

              
                
                  weixin_30445169
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
mustache-vars.js:列出Mustache模板使用的变量

				
			

			

				

					05-05
				

			

		

		

			
				
$ mustache-vars <<< " {{B}} and {{A}} " A B JavaScript  var vars = require ( 'mustache-vars' ) var assert = require ( 'assert' ) assert . deepEqual ( vars ( '{{A}}' ) , [ 'A' ] ) assert . ...

			
		

	



                

              
                



	

		

			

				
					
vue源码-mustache模板引擎分析(二)-mustache的基本使用

				
			

			

				

					qq_45679015的博客
				

				

					08-23
					
					589
					
				

			

		

		

			
				
一.什么是mustache？

mustache是胡子的意思，因为它嵌入标记{{}}像胡子。

mustache是一种没有逻辑的模板语法，因为它没有if语句，else语句和for循环，所以不能再模板中使用if..else做循环判断，也不能在模板中使用表达式。

它可以应用于HTML,配置文件，源代码等，通过使用对象提供的值在模板中展开标记显示到页面上。

二.mustache库的使用

（1）引入mustache.js[4.1.0版本]


<script src='../js/mustache.js

			
		

	



                


  
              

                


	

		

			

				
					
Js模板引擎mustache.js的使用方法，打狗棒法之《挑拨狗爪》

				
			

			

				

					我是Cj，一个正义之人
				

				

					09-18
					
					805
					
				

			

		

		

			
				
本文转载Javascript模板引擎mustache.js详解
写的不错，后面部分代码经过注释和加工。
mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用。本文总结它的使用方法和一些使用心得，内容不算很高深，纯粹是入门内容，看看即可。不过要是你还没有用过此类的javascript引擎库，那么本文还是值得你一读的，相信在你了解完它强大的功能和简单用法之后，一定会迫不及待地将之用于你的工作当中。
1. 从一个简单真

			
		

	





	

		

			

				
					
mustache模板引擎

				
			

			

				

					
				

				

					04-27
					
					158
					
				

			

		

		

			
				
模板导入
<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.min.js">
</script>

HTML数据:
<div id="table"></div>

数据插入
// 数据插入
let template = "<h1>{{ name }}语文考了{{ score }}分</h1>"
data = {name: "小明", "sc

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					蔡龙的技术交流站
				

				

					08-10
					
					1040
					
				

			

		

		

			
				
使用效果图

使用Mustache模板引擎进行动态渲染，并使用表格树控件



使用实例代码

1.jsp代码


&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
&lt;title&gt;地区管理&lt;/title&gt;
&lt;!-- 表格树控件 --&gt;
&lt;link href="${

			
		

	





	

		

			

				
					
mustache 的使用

				
			

			

				

					w632235548的专栏
				

				

					01-16
					
					5868
					
				

			

		

		

			
				
前些日子做个H5嵌入手机的应用，用到了mustache.js,于是就做个如下的简单介绍，如有错误请指出，万分感谢。最后会把项目中的如何用怎么用会贴出部分代码。mustache.js 它是一个javascript的模板引擎库，就像java模板引擎velocity一样，只是提供展示信息的模板，其语法简单明了，容易上手。一个简单的demo：<!DOCTYPE html>
<html>
    <head>

			
		

	





	

		

			

				
					
Mustache模板语法教程

					
最新发布

				
			

			

				

					06-05
				

			

		

		

			
				
《Mustache模板语法详解》  Mustache是一种轻逻辑的模板解析引擎，它的独特之处在于它能够在JavaScript、PHP、Python、Perl等多种编程语言中通用。这种跨语言的特性使得Mustache成为构建可复用且易于维护的Web应用的...

			
		

	





	

		

			

				
					
mustache   前端渲染模板

				
			

			

				

					08-23
				

			

		

		

			
				
（积分会自动改，需要的留言）实例https://blog.csdn.net/github_38854224/article/details/88012869

			
		

	





	

		

			

				
					
stache：Mustache模板编译器

				
			

			

				

					01-28
				

			

		

		

			
				
stache：Mustache模板编译器

			
		

	





	

		

			

				
					
探究Javascript模板引擎mustache.js使用方法

				
			

			

				

					10-22
				

			

		

		

			
				
主要为大家介绍了Javascript模板引擎mustache.js使用方法，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用，感兴趣的小伙伴们可以参考...

			
		

	





	

		

			

				
					
mustache.js v2.2.1强大的Javascript模板引擎

				
			

			

				

					09-05
				

			

		

		

			
				
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。
本资源包含了mustache.js 、mustache.min.js包
版本号v2.2.1

			
		

	





	

		

			

				
					
vue - 插值操作（mustache语法及常用指令）

				
			

			

				

					asfcyg的博客
				

				

					06-19
					
					648
					
				

			

		

		

			
				
mustache语法
mustache语法又叫双大括号语法，用于在页面中插入数据
data(){
	message:'mustache!',
	firstName: 'one',
    lastName: 'two',
    counter: 100
}

<h2>{{message}}</h2>


也可以拼装
<h2>{{message}} , hello</h2>

也可以些简单的表达式
<h2>{{firstName + lastNam

			
		

	





	

		

			

				
					
mustache语法

				
			

			

				

					weixin_30919571的博客
				

				

					03-08
					
					76
					
				

			

		

		

			
				
mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。
以下是学习笔记内容：

Mustache 的模板几个基本语法：

{{data}}
{{#data}} {{/data}}
{{^data}} {{/data}}
{{.}}
{{<pa...

			
		

	





	

		

			

				
					
js模板引擎mustache介绍及实例

				
			

			

				

					万万的博客
				

				

					02-23
					
					1721
					
				

			

		

		

			
				
在Javascript中 mustache.js是实现mustache模板系统。
Mustache是一种没有逻辑的模板语法。它可以应用于HTML、配置文件、源代码等任何地方。 它通过使用散列或对象中提供的值在模板中展开标记来工作。
我们称它为没有逻辑的模板，是因为它没有if语句、else子句和for循环，它只有标签。一些标签被替换为值或什么也没有或者一系列的值。

不能在模板中使用else if做...

			
		

	





	

		

			

				
					
用Mustache模板来进行字符串处理（截取替换）

				
			

			

				

					weixin_43165220的博客
				

				

					07-20
					
					925
					
				

			

		

		

			
				
这两天在做一个有用到字符串截取替换的需求，这个字符串有的地方是一个固定格式的表达式，比如：
随便%name.001%输入%001.select.下拉框%点%name.010%%010.table.表格%什么%name.100%文字%100.form.表单%看看

比如我一条数据，有id，name，type，description等这些属性。
这里的%和%之间就相当于一个占位符，第一个%到第二个%之间用的是name.id这种格式，后面要将这个替换成数据的名称name；
第三个%到第四个%用的是id.type.

			
		

	





	

		

			

				
					
Mock数据&Mustache语法学习记录

				
			

			

				

					weixin_47069979的博客
				

				

					05-28
					
					7705
					
				

			

		

		

			
				
简单记录一下Mock数据运行成功。

1.最基础的HTML+jQuery，如何运行Mock数据

新建一个文件夹，用于存放mock.min.js文件和mustache.min.js文件，（压缩文件）
代码自取⬇️

mock.min.js


!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.

			
		

	





	

		

			

				
					
小程序学习（二）

				
			

			

				

					weixin_45515107的博客
				

				

					03-14
					
					625
					
				

			

		

		

			
				
1、WXML模板语法-数据绑定

1.1、数据绑定的基本原则

在data中定义数据
	在WXML中使用数据
1.2、在data中定义页面的数据

在页面对于的.js文件中，把数据定义大data对象中即可：



1.3、Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：



1.4、Mustache语法的应用场景

应用场景如下：

绑定内容
	绑定属性
	运算（三元运算、算术运算等）
1.5、动态绑定内容

页面内容：


			
		

	





	

		

			

				
					
mustache模版

				
			

			

				

					罗小爬的技术宝书
				

				

					09-19
					
					957
					
				

			

		

		

			
				
目录简介语法Variable（变量）SectionsInverted SectionsCommentsPartialsSet DelimiterJava集成
参考：
http://mustache.github.io/
http://mustache.github.io/mustache.5.html
简介
最近在研究swagger-codegen时，发现其使用的mustache模版语言，故对此进行了简单了解。
Mustache称自己为Logic-less（无逻辑）模版语言，可以用于HTML、配置文件、源代

			
		

	





	

		

			

				
					
mustache 模板 jquery 实现或条件

				
			

			

				

					05-22
				

			

		

		

			
				
可以使用以下代码来实现 Mustache 模板中的或条件：  HTML：  ```   {{#if (cond1 || cond2)}}  <!-- code to be executed if either cond1 or cond2 is true -->  {{/if}}  ```  JavaScript：  ``` var template = ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值