artTemplate模板引擎的簡單實用

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

雖說現在多數公司都是用MV*框架做專案，資料驅動檢視更新，Dom操作部分就不需要太在意，只管邏輯部分。就在今天2018.6.26日，這是有一個 特別的日子 ，因為我我….不說了！說一下我哪個美麗又可愛的朋友問我jq裡怎麼用模板引擎，所以我就寫個demo給她，雖說自己也是渣渣，但是能幫到她就挺好的，所以我想既然都demo都寫了，就發個部落格記錄一下，看有沒有人恰巧有用，點上一讚足以讓我開心的像200斤的孩子了。這裡我就給他推薦art-template，為啥呢？因為官方吹的牛逼，哈哈哈！有種捨我其誰之勢，所以就選擇了他。如下圖：

裡面有詳細的介紹，我這裡就簡單的用script標籤引入的方法做個小小demo。不扯這麼多沒用的，程式碼如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>artTemplate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> --> 

    <script src="./template-web.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul li {
            list-style: none;
        }

        .top {
            height: 100px;
            width: 100%;
            box-sizing 
: border-box;
            border-bottom: 1px solid #ccc;
            color: #333;
        }

        .right {
            width: 72%;
            float: right;
            margin-top: 20px;
            margin-right: 5px;
        }
        /* 圖片 */

        .top_left {
            display: inline-block;
            width: 22%;
            margin-top: 20px;
        }

        .top .top_left .imgs {
            display: inline-block;
            width: 100%;
            height: 98%;
            text-align: center;
        }

        .top .top_left .imgs img {
            width: 60px;
            line-height: 60px;
            float: right;
        }

        .top .top_center {
            display: inline-block;
            width: 45%;
        }

        .top .top_right {
            display: inline-block;
            width: 50%;
        }

        .top .top_bottom {
            display: inline-block;
            width: 50%;
            text-align: center;
            color: #333;
        }

        .top .top_bottom a {
            width: 32px;
            height: 40px;
        }

        .top .top_bottom a img {
            width: 32px;
        }

        .right ul li {
            margin-bottom: 10px;
        }

        .top_center ul li:nth-child(1) {
            font-weight: bold;
        }

        .date_time {
            margin: 15px 15px 0 15px;
            color: #333;
        }

        .date_time ul li {
            margin: 15px 0;
        }

        .judge {
            margin: 0 15px 0 15px;
            color: #333;
        }

        .judge p {
            margin: 15px 0;
        }

        .border {
            height: 5px;
            background-color: #F6F6F6;
        }

        .bottom {
            margin: 15px 15px 0 15px;
            color: #333;
        }
        /* 輸入框 */

        textarea {
            width: 100%;
            height: 70px;
            margin-top: 10px;
            padding: 8px;
            font-size: 14px;
        }

        .consent {
            width: 100%;
            margin-top: 35px;
        }

        .consent_lf {
            display: inline-block;
            width: 49%;
            text-align: center;
        }

        .consent_rg {
            display: inline-block;
            width: 49%;
            text-align: center;
        }

        .consent_left {
            width: 130px;
            height: 40px;
            border-radius: 20px;
            border: none;
            background-color: #FF5E5E;
            color: #fff;
            font-size: 16px;
        }

        .consent_right {
            width: 130px;
            height: 40px;
            border-radius: 20px;
            border: none;
            background-color: #00BA86;
            color: #fff;
            font-size: 16px;
        }

        .bottom_span {
            display: inline-block;
            width: 100%;
            padding: 10px 0;
            margin-top: 10px;
            background-color: #EEE;
            padding-left: 10px;
        }

        .height {
            height: 50px;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 這裡就是用在模板引擎的父容器 -->
    <div id="content"></div>
    <!-- 這裡就是模板 -->
    <script id="test" type="text/html">

        <div class="top">
            <div class="top_left">
                <span class="imgs">
                    <span class=""></span>
                <img src="{{avator}}" alt="">
                </span>
            </div>
            <div class="right">
                <div class="top_center">
                    <ul>
                        <li>{{teacherName}}</li>
                        <li>{{zhiye}}</li>
                    </ul>
                </div>
                <div class="top_bottom">
                    <a tel="18875639854">
                        <img src="{{avator}}" alt="">
                    </a>
                    <p>聯絡TA</p>
                </div>

            </div>

        </div>

        <div class="date_time">
            <ul>

                <li>是否有調班物件： {{if isTb}}<span>是</span> {{else if !isTb}}<span>否</span>{{/if}}
                </li>
                <li>開始時間：
                    <span>{{start_time}}</span>
                </li>
                <li>結束時間：
                    <span>{{end_time}}</span>
                </li>
                <li>請假時長：
                    <span>{{day}}天</span>
                </li>
                <li>請假事由：
                    <span>{{yuanyin}}</span>
                </li>
            </ul>
        </div>
        <!-- 有調班物件時judge這個隱藏 -->
        <div class="judge">
            <ul>
                <p>調班物件：
                    <span>蘇菲</span>
                </p>
                <p>
                    <span>備註：</span>
                    <span>哈哈哈哈或或或或或或或或或或或或或或或或或或</span>
                </p>
            </ul>
        </div>
        <!-- 有調班物件時judge這個隱藏 -->
        <div class="border"></div>
        <div class="bottom">
            <p>調班保潔師:
                <span>{{dbbjs}}</span>
            </p>
            <textarea name="txt" placeholder="請輸入你的意見"></textarea>
            <span class="bottom_span">{{jianyi}}</span>
        </div>

        <!-- 無調班物件時和調班物件同意書bottom這個顯示 -->
        <div class="bottom">
            <p>保潔師主管:
                <span>{{zhuguan}}</span>
            </p>
            <textarea name="txt" placeholder="請輸入你的意見"></textarea>
        </div>
        <!-- 無調班物件時和調班物件同意書bottom這個顯示 -->
        <div class="consent">
            <div class="consent_lf">
                <button class="consent_left">不同意</button>
            </div>
            <div class="consent_rg">
                <button class="consent_right">同意</button>
            </div>

        </div>
        <div class="height"></div>
    </script>

    <script>
        var data = {
            avator: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b3d532e743c2d562ed08d6edd71390f3/7e3e6709c93d70cf312a368af4dcd100bba12b60.jpg",
            isTb: false, //是否調班
            teacherName: "水水",
            zhiye: "前端大佬",
            start_time: "1996-06-30",
            end_time: "2018-06-30",
            yuanyin: "因為水水最美，就不想上班，怎麼滴???????????????????",
            jianyi: "同意！恭喜老姐，棒棒噠！！同意！恭喜老姐，棒棒噠！！", //建議，
            dbbjs: "蘇菲",
            day: "999999", //請假天數
            zhuguan: "鄒佩玲", //保潔主管
            isAgreen: true, //是否同意



        };
        var html = template('test', data); //data為模板資料
        document.getElementById('content').innerHTML = html; //將生成的模板填充新增到對應的容器中
    </script>
</body>

</html>

效果圖如下：

demo效果圖

artTemplate模板引擎的簡單實用

雖說現在多數公司都是用MV*框架做專案，資料驅動檢視更新，Dom操作部分就不需要太在意，只管邏輯部分。就在今天2018.6.26日，這是有一個特別的日子，因為我我….不說了！說一下我哪個美麗又

artTemplate模板引擎

document bwt ucc 編譯 ssid card 默認 tsl ng- 　1.artTemplate模板引擎的基本語法結構　　2.artTemplate模板引擎的基本使用方法　　　　2.1：使用一個type="text/html"的script標簽存放模板

arttemplate模板引擎有假數據返回數據多層內嵌的渲染方法

錯誤一個 scala pan 制作 nes 國家引擎求和 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="

velocity 模板的簡單實用

其實，是做後端的，但是最近手上的一個專案前後端不分離，前端頁面使用了velocity模板，因此也是邊做邊學，積累了一些些小知識，現在跟大家做一下分享，多少不重要，錯誤請指正主要分享一下，如何使用velocity模板，取出後臺查出的資料1，簡單的獲取後臺查出的物件的資料如，

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

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

使用模板引擎artTemplate的幾個問題總結

之前 bsp 分享執行 com ima not found mage parse 一、Template not found 有的時候模板寫的並沒有問題，可就是找不到。這時候可能是<script>加載順序問題，模板渲染在模板加載完成之前先執行了，調整

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

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

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

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

nodejs 模板引擎jade的簡單使用

pan str 輸出結果 nodejs com ima 技術分享 class alt 1.jade html head style script body div ul

nodejs 模板引擎ejs的簡單使用（3）

技術 head http html bsp alt {} 輸出 body 1.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

spring boot Thymeleaf模板引擎最簡單輸出例子

test leaf att map 控制器輸出 span blog hello spring boot Thymeleaf模板引擎最簡單輸出例子控制器代碼如下： @GetMapping(value = "/test")public String test(Mo

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

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

模板引擎ejs簡單介紹

模板引擎：將資料與標籤分離開來，這樣就不需要前面寫的學生管理系統那樣，在頁面顯示資訊通過字串的拼接的方式，而是直接用ejs模板引擎，將伺服器端傳過來的資料在頁面直接顯示出來，不會那樣的麻煩了。 ejs內部使用js程式碼，按照js的語法，內容都寫在<% %>中

前端javaScript模板引擎之ArtTemplate

一、簡介 ArtTemplate是騰訊開發的一款使用方便、效能卓越javascript模板引擎,其渲染效率極其快。ArtTemplate的庫分為兩種,一個是template.js,這個是簡單的語法版本。另一個是template-native.js，是原生的語法版

springboot2.x簡單詳細教程--常用Starter介紹和整合模板引擎Freemaker、thymeleaf（第七章）

一、SpringBoot Starter講解簡單說springboot Starter 就是jar包的集合，集合了很多的依賴簡介：介紹什麼是SpringBoot Starter和主要作用 1、官網地址：https://docs.spring.

超快的前端模板引擎 artTemplate

artTemplate 新一代 javascript 模板引擎 artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 效能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與

編寫簡單js的mvc模板引擎

<div id="con"></div> <script type="text/html" id="template"> <p>name:{{name}}</p> <p>age:{{age}}</p&

art-template模板引擎的簡單使用

下載 git clone https://github.com/aui/art-template 沒安裝git的可以直接開啟網址下載，下載完後使用lib資料夾下的template.js 文字文件 art-template 簡單渲染 HTML程式碼–script裡面的

SpringMVC+jade實現高效能模板引擎（簡單配置）

最近在研究一個前後端通用的高效能模板引擎，大概搜尋了下資料，有很多類似的模板引擎，比如Jade，Mustache.js，Dust.js，Nunjucks，EJS等等，當然只適用於前端或者只適用於後端的模板引擎就不算啦，比如（jquery template，fre

js模板引擎artTemplate快速上手

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

artTemplate模板引擎的簡單實用

效果圖如下：

相關推薦