一个例子涵盖所有：

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>include demo</title>

        <script src="template.js"></script>

    </head>  

    <body>

        <div id="content"></div>

        <div id="tagcontent"></div>

        <script id="targettemplate" type="text/html">

            <h1><%=title%></h1>

            <%include('list')%>   //嵌入子模板，id作为标识

            <%include('Tvalue')%>

        </script>

        <script id="list" type="text/html">

            <ul>

                <%for(var i=0; i<listItems.length; i++){%>

                    <li>条目内容<%=i+1%> : <%=listItems[i]%></li>

                <%}%>

            </ul>

        </script>

        <script id="Tvalue" type="text/html">

            <p>不转义:<%==trans%> or <%=#trans%></p>

            <p>默认转义: <%=trans%></p>

        </script>  

        <script>

            var data = {

                title: '嵌入子模板',

                listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],

                trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'

            };

            var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的，'

            +'如果使用了 id 参数，可以使用template.render(id, data)渲染模板。</h3>'

            +'使用arttemplate来编写：<%=title%>';  

            var html = template.render('targettemplate', data);  

            var render = template.compile(logintsorse);  //编译一段html代码成模板，render(data)把数据render进去

            var compilehtml = render(data);  

            document.getElementById('content').innerHTML = html+compilehtml;

        </script>  

        <script id="customTag" type="text/html">

            <h1><!--[= header]--></h1>

            <ul>

                <!--[for(var i=0; i<tag.length; i++){]-->

                    <li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>

                <!--[}]-->

            </ul>

        </script>

        <script>

            template.openTag = '<!--[';

            template.closeTag = ']-->';

            var listdata = {

                header : 'your study list',

                tag : ['算法导论','linq','c#','jquery','django','python']

            };

            var resulthtml = template.render ('customTag', listdata);

            document.getElementById('tagcontent').innerHTML = resulthtml;  

            //

        </script>

    </body>  

    </html>

js 模板引擎 -Art Template的更多相关文章

  1. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  2. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  3. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  4. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  5. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  7. 百度JS模板引擎 baiduTemplate 1.0.6 版

    A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...

  8. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  9. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...

随机推荐

  1. Djano中static和media文件路径的设置

    对于常用的css.js.image和常用的工具类在django项目中要设置一个全局的路径,对所有的app都可以访问到这个路径下的文件 1在django项目的setting文件中设置对应的static和 ...

  2. 人生苦短_我用Python_类与对象的概念_006

    Python类与对象的概念类和对象--->万事万物都对象物以类聚.人以群分 --->?划分标准性别分 男女 中性成绩分 优秀 良好 不及格 类->根据类的属性来划分类的实例-> ...

  3. find命令进阶（二）：对找到的文件执行操作exec

    以下面的命令为例: find ~ -type f -name 'foo*' -exec ls -l '{}' ';' 分面两部分,第一部分: find ~ -type f -name 'foo*' 即 ...

  4. This MySqlConnection is already in use

    项目中类似于以下的代码,实际的代码要更复杂,DbContext是依赖注入的: 报错如下: This MySqlConnection is already in use. See https://fl. ...

  5. 51nod 1661: 黑板上的游戏（sg函数 找规律）

    题目链接 先打一个sg函数的表,找找规律,发现sg函数可以递归求解 打表代码如下 #include<bits/stdc++.h> using namespace std; typedef ...

  6. 【CF1210D】Konrad and Company Evaluation（vector，图论）

    题意:有i个人,m对两两之间的关系,第i个人初始的薪水为i,有q次操作,第i次操作会把v[i]号的薪水提升成n+i 如果两个人之间存在关系,薪水高的会向薪水低的炫耀 定义u,v,w为一个三元组,当u向 ...

  7. MySQL操作数据库值mysql事务

    创建一个无参数的事务     注意要写START TRANSACTION或者是Begin;Mysql会默认直接执行一个单元 MYSQL默认是自动提交的,也就是你提交一个QUERY,它就直接执行!我们可 ...

  8. C#关于日期 月 天数 和一年有多少周及根据某年某周获取时间段的计算(转)

    /// 当前月有多少天 /// </summary> /// <param name="y"></param> /// <param na ...

  9. 测开之路三十三：Flask实现扎金花游戏

    访问http://localhost:8888/game随机获取一张扑克牌.豹子(炸弹):三张点相同的牌.例:AAA.222.顺金(同花顺.色托):花色相同的顺子.例:黑桃456.红桃789.最大的顺 ...

  10. Python Django 编写一个简易的后台管理工具1-安装环境

    安装python环境 MAC 一般都会自带 Python2.x版本 的环境,你也可以在链接 https://www.python.org/downloads/mac-osx/ 上下载最新版安装. 安装 ...