JS模板引擎-騰訊artTemplate 簡潔語法例子

阿新 • • 發佈：2019-01-13

參考：https://github.com/aui/artTemplate

下載後其中自帶有例子；下面是自己參照寫的。

<!DOCTYPE HTML >
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Index</title>
		<script src="dist/template.js"></script>
    </head>
    <body>
        <div id="content"></div>
		<script id="test" type="text/html">
			{{if isAdmin}}
				<h1>{{title}}</h1>
				<ul>
					{{each list as value index}}
						<li>索引：{{index}}:{{value}}</li>
					{{/each}}
				</ul>
			{{/if}}
		</script>
		<script>
			var data = {
				title : 'HELLO WORLD',
				isAdmin : true,
				list : ['新聞','軍事','歷史','政治']
			};
			var html = template('test', data);
			document.getElementById("content").innerHTML = html;
		</script>
		<hr/>no-escape 不轉義HTML
		<div id="div_noescape"></div>
		<script id="no_escape" type="text/html">
			<p>不轉義：{{#text}}</p>
    		<p>預設轉義： {{text}}</p>
		</script>
        <script>
            var data_noEscape = {
                text: '<span style="color:#F00">hello world!</span>'
            };
			var html_noescape = template("no_escape", data_noEscape);
			document.getElementById("div_noescape").innerHTML = html_noescape;
        </script>
		<hr/> 在javascript中存放模板
		<div id="div_complie"></div>
        <script>
            var source = '<ur>' +
	            '{{each list}}'+
					'<li>索引：{{$index+1}}:{{$value}}</li>'+
				'{{/each}}'+
            '</ul>';
			var data = {
				list : ['電影','電視劇','綜藝','音樂']
			};
			var render = template.compile(source);
			var html = render(data);
			document.getElementById("div_complie").innerHTML = html;
        </script>
		<hr/> 嵌入子模板(include)
		<div id="div_include"></div>
		<script id="include" type="text/html">
			{{include 'test'}}			
		</script>
		<script>
			document.getElementById("div_include").innerHTML = html;
		</script>
		<hr/>輔助方法
		<script id="helper" type="text/html">
			{{time | xx:'yyyy年 MM月 dd日 hh:mm:ss'}}
		</script>
		<div id="div_helper"></div>
        <script>
            /** 
             * 對日期進行格式化，
             * @param date 要格式化的日期
             * @param format 進行格式化的模式字串
             *     支援的模式字母有：
             *     y:年,
             *     M:年中的月份(1-12),
             *     d:月份中的天(1-31),
             *     h:小時(0-23),
             *     m:分(0-59),
             *     s:秒(0-59),
             *     S:毫秒(0-999),
             *     q:季度(1-4)
             * @return String
             */
            function dateFormat(date, format){
            
                date = new Date(date);
                var map = {
                    "M": date.getMonth() + 1, //月份 
                    "d": date.getDate(), //日 
                    "h": date.getHours(), //小時 
                    "m": date.getMinutes(), //分 
                    "s": date.getSeconds(), //秒 
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                    "S": date.getMilliseconds() //毫秒 
                };
                
                format = format.replace(/([yMdhmsqS])+/g, function(all, t){
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    }
                    else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                    return all;
                });
                return format;
            }
			var data = {
				time: 1408536771253,
			};
			template.helper("xx", dateFormat);
			var html = template('helper', data);
			document.getElementById('div_helper').innerHTML = html;
//			document.getElementById("div_helper").innerHTML = dateFormat(new Date());
        </script>
    </body>
</html>

helper:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Index</title>
        <script src="dist/template.js">
        </script>
    </head>
    <body>
    <div id="content">
    </div>
    <script id="test" type="text/html">
        {{xx(n)}}
    </script>
    <script>
        template.helper("xx", function(a){
            return 10 + "--" + a;
        });
        var data = {
            n: 123
        };
        var html = template("test", data);
        document.getElementById("content").innerHTML = html;
    </script>
    </div>
</body>
</html>

其中函式參考：http://yaniswang.com/frontend/2013/02/16/dateformat-performance/

JS模板引擎-騰訊artTemplate 簡潔語法例子

參考：https://github.com/aui/artTemplate 下載後其中自帶有例子；下面是自己參照寫的。 <!DOCTYPE HTML > <html> <head> <meta http-

js模板引擎——artTemplate的使用問題

-- sel rip 方式 blog 使用都在 text element 最近在使用模板引擎，對於出現的錯誤做一個小總結。想要在下拉框中使用模板，讓下拉選項中的每一項都由模板顯示。用下面的寫法會出錯，只有一個下拉選項，所有的數據都在一行內。 .... <se

artTemplate js模板引擎動態給html賦值

html放到$("#area").append(html);之前，否則文件流獲取不到#area <table width="90%" class="table" cellspacing="0" cellpadding="0"> <thead> <tr> <th

js模板引擎artTemplate快速上手

騰訊的artTemplate 1，編寫模板 (採用script標籤並帶有屬性id和type="text/html") <script id="test" type="text/html"&

js模板引擎art-template基礎語法和搭配ajax渲染頁面

在github下載的aui/資料夾裡引入檔案： <script type="text/javascript" src="artTemplate/dist/template.js"></script> 簡易寫法demo： <!DOCTY

epii.js簡約而不簡單的JS模板引擎

js1,基礎數據綁定epii 自定義dom節點屬性 r-data 可以對任何類型節點賦值，其中 input 節點最終賦值其value 屬性，img節點賦值其 src 屬性，其它類型節點均賦值innerHtml 屬性。如果設置r-data-default 則在沒有數據時候顯示默認值。r-data="title

js模板引擎---jtemplates使用

sel this href pla text cda phone js模板編寫昨天記錄了如何使用騰訊的模板引擎，今天記錄一下jquery的模板引擎jtemplates。官網：http://jtemplates.tpython.com/ 編寫模板：需要在頁面引入jquer

Epii.js 一個極其簡單的Js模板引擎

idt 定義 images 更多 mas play 寫法 ren gin Epii.js 簡約而不簡單的JavaScript模板引擎項目地址 https://github.com/epaii/epii.js 極低門檻，拿來即用，別忘記star

微擎框架下拉分頁（使用js模板引擎）

contain don obi 方式 get onf info 循環 time 1.需要分頁的頁面，引入一下文件 <script language="javascript" src="\addons\{$_GPC[‘m‘]}\template\mobile\js/re

js模板引擎

spa 其他多個 js模板引擎 col bsp 參數 ron list 1.有多個循環的可以把其他循環內容放進原來循環的一個參數裏面，然後循環這個參數就行了 <%esch list as log jianzhi%>======jianzhi就是鍵值，從0開始

[js高手之路]Node.js模板引擎教程-jade速學與實戰3-mixin

函數 .cn ima images ade 高手 js模板引擎 ron pan 強大的mixin mixin類似於函數的功能，可以達到模塊復用的效果 mixin show: 定義一個類似函數的功能，名字叫show，裏面的就是他的內容 +show: 調用show，每

[js高手之路]Node.js模板引擎教程-jade速學與實戰2-流程控制,轉義與非轉義

title 學習 != 下一步 cas ase spa back name 一、轉義與非轉義 jade模板文件代碼： 1 doctype html 2 html 3 head 4 meta(charset=‘utf-8‘)

[js高手之路]Node.js模板引擎教程-jade速學與實戰4-模板引用,繼承,插件使用

node.js ade 方法頭部 containe jade bsp 繼承 for 一、block 模塊復用把需要復用的模塊用block定義 block後面跟上模塊的名字，引用一次block 內容就會被復用一次編譯之後的結果：二，繼承模板(exten

簡易js模板引擎

n) oot 拆分而且想要 list function stripe 上下文前面 js 模板引擎有很多很多，我以前經常用 art-template ，有時候也會拿 vue 來當模板引擎用。直到...... 年初的時候，我還在上個項目組，那時候代碼規範是

js模板引擎-art-template常用

ava 隱藏定義函數 debug 很多原生語法 console 接受 art-template javascript 模板引擎分為原生語法和簡潔語法，本文主要是講簡潔語法基礎數據渲染輸出HTML 流程控制遍歷調用自定義函數方法子模板引入基礎數據渲染

百度JS模板引擎

lan cap pla 說明 doc list集合 template 比較 xss 1. 應用場景前端使用的模板系統或後端Javascript環境發布頁面 2. 功能描述提供一套模板語法，用戶可以寫一個模板區塊，每次根據傳入的數據，生成對應數據產生的HTM

laytpl js模板引擎

常用模塊彈層 bar layui onf fig 邏輯 render 一位 laytpl js模板引擎。laytpl是一款非常輕量的JavaScript模板引擎。地址：http://www.layui.com/laytpl/ 用法與handlebar.js類似，但是比較輕

AJAX template-web.js (模板引擎) jquery.twbsPagination.js (分頁外掛) 的使用

模板引擎分頁外掛 1.概念模板引擎不屬於特定技術領域，它是跨領域跨平臺的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm開發都會用到模板引擎技術。 2.原理置換型模板引擎實現簡單，但其效率低下，

node.js模板引擎ejs的使用方法

ejs模板引擎安裝模組 ejs express cnpm install ejs-cli -g 標準的json字串必須是單引號編譯ejs模板檔案命令什麼是模板引擎為什麼要用模板引擎迴圈遍歷資料顯示實現資料和檢視分離案例用jq

template-web.js模板引擎框架

web前端模板引擎框架之一的template-web.js模板引擎框架，用於引入多條相同的資料。步驟： 1.匯入模板檔案，這裡是用的是art_template 2.寫好模板，是待作為複製的物件，寫在script中，type為text/hml，這樣不會再頁面中解析。 3.引入需要使用模板的資

JS模板引擎-騰訊artTemplate 簡潔語法例子

相關推薦