美文网首页
# artTemplate.js 模板引擎 简洁语法例子

# artTemplate.js 模板引擎 简洁语法例子

作者: yonglei_shang | 来源:发表于2016-11-30 21:11 被阅读788次

语法

  • 首先同样是引入template.js
<script src="template.js"></script>
  • 在结构中随便创建个div
<div id="div1"></div>
  • 创建模板(简洁的语法)
<script id="content" type="text/html">
    {{if isAdmin}}
        <h1>{{title}}</h1>
        <ul>
            {{each list as value index}}
               <li>索引:{{index}}:{{value}}</li>
            {{/each}}
        </ul>
    {{/if}}
</script>
  • 创建模板(原生语法)
<%if (isAdmin) {%>
    <h1><%=title%></h1>
    <ul>
        <%for (var i = 0; i < list.length; i++) {%>
            <li>索引:<%i%>:<%list[i]%></li>
        <%}%>
    </ul>
<%}%>
* 数据 (数据一般是从后台获取)

<script>
var data = {
title: "hello world",
isAdmin: true,
list: ['新闻','军事','历史','政治']
};
var html = template('content',data);
document.getElementById('div1').innerHTML = html;
</script>

> 注意:简洁语法引用的js为(template.js),原生语法引用的js为(template-native.js)

参考网址:https://github.com/aui/artTemplate

相关文章

  • # artTemplate.js 模板引擎 简洁语法例子

    语法 首先同样是引入template.js 在结构中随便创建个div 创建模板(简洁的语法) 创建模板(原生语法)...

  • next主题的模板引擎swig语法介绍

    next采用的模板引擎是swig,swig 是node端的一个优秀简洁的模板引擎,类似Python模板引擎Jinj...

  • Ajax-02

    模板引擎 模板引擎概述 作用:使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来。官方地址: https...

  • Laravel-Blade模板引擎

    Blade模板引擎 Blade模板引擎简介及模板继承的使用 基础语法及include的使用 流程控制 模板中的UR...

  • koa2使用模板引擎

    这篇教大家如何使用模板引擎 这里我们使用ejs模板引擎做 个例子,你们自己选择自己熟练的模板引擎 使用的版本: 文...

  • 模板语法、条件、循环

    模板语法 vue的特点就是,可以使用简洁的模板语法将数据声明似的渲染进DOM系统。常见模板语法有:插值:{{}}输...

  • 02Ajax-模板引擎

    模板引擎概述 作用:使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来。官方地址: https://au...

  • Python flask 学习笔记(二)

    模板引擎 模板渲染 变量 流程控制 1. 模板渲染 Jinja2 模板引擎 页面渲染流程 一个简单的例子: 2. ...

  • baiduTemplate / artTemplate

    JS引擎模板 baiduTeplate 模板语法 提供一套模板语法,用户可以定义一个模板区块,每次根据传入的数据生...

  • (二) flask的模板引擎

    模板引擎 概念: 模板引擎就是一个按照一定的语法格式, 使用视图的参数进行替换的一个过程 jinjia2模板引擎 ...

网友评论

      本文标题:# artTemplate.js 模板引擎 简洁语法例子

      本文链接:https://www.haomeiwen.com/subject/vkgtmttx.html