安装：

　　方式1：artTemplate模板源码下载地址：https://aui.github.io/art-template/zh-cn/index.html

　　方式2：使用node.js进行安装：npm install art-template --save -dev

文档：

　　artTemplate 中文API文档地址：https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E8%BF%87%E6%BB%A4%E5%99%A8

问：为什么要使用artTemplate模板？不是有django模板吗？

答：为了实现动态加载，因为有时候不想刷新整个页面，只在局部增加内容，则需要使用 artTemplate 模板 与 ajax 配合了

使用：介绍模板使用 与 自定义过滤器，其他参考 官方API文档

一、art-Template在Django模板中的简单使用：

　1. 前端html代码

<!-- verbatim：为了解决django模板与art模板的冲突Django不会渲染 {% verbatim %}{% endverbatim %} 标签包裹的内容，
    如果不使用改标签则会发生错误：django无法解析模板-->

<scripts type="text/html" id="test-item" >

        {% verbatim %}

           <!-- each是循环变量：遍历对象，遍历的值，遍历的下标 -->

            {{each target value index}}
　　　　　　　<li>
　　　　　　　　<!-- 可以在取值的时候增加前缀：$ --> <!--<p>{{$index}} | {{$value}} |{{value.name}} -->
　　　　　　　　<!-- 可以通过 value.key 的方式得到对象中的值 --> 
　　　　　　　　 <p>索引：{{index}} | 姓名：{{value.username}} | 年龄：{{value.age}} | 爱好：{{value.hobby.bobby1}}</p>
　　　　　　　</li>

            {{/each}}

        {% endverbatim %}

</script>    
<body>
　　<ul id="test-artTemplate>
　　　　<li>这是初始的li标签</li>
　　</ul>
　　<!-- 点击按钮增加一个li标签 -->
　　<button id="add-li-btn">增加li标签</button>
</body>

2. js代码：　

// 导入 jquery

$(function(){ 
  // 为 id 为 "add-li-btn" 的按钮注册 点击 事件

  $("add-li-btn").click(function(){
　　　　// 制作一个 data 数据
　　　　var data = [
　　　　　　{'username':'ljx','age':20,'hobby':['hobby1','hobby2','hobby3']},
　　　　　　{{'username':'lxl','age':40,'hobby':['hobby1','hobby2','hobby3']　　　
　　　　}]
　　　　// 渲染 id 为 test-item 的 artTemplate 模板：Template('id',{'对象名':'数据'})
　　　　// 对象名要与模板中定义的一致
　　　　var addli_html = Template('test-item',{'target':data});　　
       $(test-artTemplate).append(addli_html) // 将渲染的模板代码追加到 id 为 test-artTemplate 的元素中

   });

});

　　输出结果：

<ul>
　　<li>这是初始的li标签</li>
　　<li>索引：0, | 姓名：ljx | 年龄：20 | 爱好：bobby1</li>
　　<li>索引：1, | 姓名：lxl | 年龄：40 | 爱好：bobby1</li>
</ul>

二、art-template 中的过滤器：

　　1. 注册过滤器：

<script type="text/JavaScript">　　
　　// data：接收一个值，然后在过滤器中进行处理后返回一个值

　　template.defaults.imports.过滤器名称 = function(data){

    　　过滤器的内容

    　　一定要注意 需要一个返回值

　　};

</script>

　　2. 使用案例

　　　　js代码：

<script type="text/JavaScript">
　　// 注册一个名为：time_filter 的过滤器
 $(function(){
　　　　template.defaults.imports.Multiplying_filter = function(index){
　　　　return index * 10
　　}
});
$(function(){
　　var add_html = Template('test-item',{'target':{'index',10}});
　　$("test-template-filter").append(add_html);
});
　　
</script>

　　　　html代码：

<body>
<script type="text/html" id="test-item">
　　// 将 {{index}} 这个值传给过滤器：Multiplying_filter ，进行处理之后返回一个新的值
　　<p>{{index}} * 10的结果是：{{index|Multiplying_filter}}</p>
</script>
<div id="test-template-filter">
</div>
</body>

　 输出结果：10 * 10的结果是：100

　　When you want to grow up, you will always arrange some people or things that irritate you.

　　命运要你成长的时候，总会安排一些让你不顺心的人或事刺激你

　　

　　

django之js模板插件artTemplate的使用的更多相关文章

  1. js模板引擎--artTemplate

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

  2. js模板引擎art-template使用方法

    art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...

  3. js模板引擎-art-template常用总结

    art-template javascript 模板引擎,官网:https://github.com/aui/art-template 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出 ...

  4. js模板引擎-art-template常用总结（转）

    原文:https://www.cnblogs.com/shiyou00/p/6841801.html art-template javascript 模板引擎,官网:https://github.co ...

  5. js模板引擎art-Template（以前的artTemplate）

    使用js.jquery动态生成html会非常麻烦.现在的模板引擎可以很简单的解决这个问题.比如腾讯出的art-Template 官网:http://aui.github.io/art-template ...

  6. js模板引擎-art-template常用

    art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...

  7. js模板引擎artTemplate快速上手

    腾讯的artTemplate 1,编写模板 (采用script标签并带有属性id和type="text/html") <script id="test" ...

  8. 性能卓越的js模板引擎--artTemplate

    artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mu ...

  9. 模板插件aTpl.js新增功能

    摘要: aTpl.js是一款模板插件,该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式.最近对aTpl.js模板插件增加了新的功能,支持字符串模板,同时增加了 ...

随机推荐

  1. 【剑指Offer】数字在排序数组中出现的次数 解题报告（Python）

    [剑指Offer]数字在排序数组中出现的次数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interv ...

  2. [LeetCode] 448. Find All Numbers Disappeared in an Array 找到数组中消失的数字

    题目描述 给定n个数字的数组,里面的值都是1-n,但是有的出现了两遍,因此有的没有出现,求没有出现值这个数组中的值有哪些. 要求不能用额外的空间(除了返回列表之外),时间复杂度n 思路 因为不能用额外 ...

  3. Codeforces A. Orchestra

    A. Orchestra time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  4. Codeforces 777C：Alyona and Spreadsheet（预处理）

    During the lesson small girl Alyona works with one famous spreadsheet computer program and learns ho ...

  5. .Net Core 3.1 WebApi发布到IIS

    安装.Net Core 3.1 运行时环境 1.官网地址https://dotnet.microsoft.com/download/dotnet,选择要下载的运行时版本(.Net Core 3.1), ...

  6. SpringCloud创建Config Client通过Eureka访问Config

    1.说明 本文详细介绍配置中心客户端使用方法, 即Config Client到Config Server读取配置. 读取配置的方式有两种, 第一种是直接配置Configer Server的URL, 第 ...

  7. SpringBoot集成MyBatis-Plus框架详细方法

    1.说明 本文详细介绍Spring Boot集成MyBatis-Plus框架的方法, 使用MySQL数据库进行测试, 包括完整的开发到测试步骤, 从一开始的Spring Boot工程创建, 到MySQ ...

  8. 实验 7 : OpenDaylight 实验 —— Python 中的 REST API 调用

    实验 7 : OpenDaylight 实验 -- Python 中的 REST API 调用 一.实验 目的 对 Python 调用 OpenDaylight 的 REST API 方法有初步了解. ...

  9. Go语言系列之标准库ioutil

    ioutil标准库中提供了一些常用.方便的IO操作函数 一.相关方法 func ReadAll(r io.Reader) ([]byte, error) func ReadDir(dirname st ...

  10. 关于less使用初学者常犯错误

    1.多层嵌套 2.定义变量复用性不高 3.方法定义多余参数.