安装：

　　方式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. 【LeetCode】518. Coin Change 2 解题报告（Python）

    [LeetCode]518. Coin Change 2 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目 ...

  2. 【LeetCode】883. Projection Area of 3D Shapes 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 数学计算 日期 题目地址:https://leetc ...

  3. 【漏洞复现】ThinkAdmin v5和v6 未授权列目录任意文件读取(CVE-2020-25540)

    ThinkAdmin v5和v6 未授权列目录/任意文件读取(CVE-2020-25540) 漏洞简介 ThinkAdmin是一套基于ThinkPHP框架的通用后台管理系统.ThinkAdmin v6 ...

  4. 为什么加密后的数据往往都是base64输出而不是hex16进制输出

    通常加密后的数据都是字节数组,比如流行的aes128对称加密,还有Rsa非对称加密,加密后得到了一个字节数组,这个字节数组存在内存中,往往我们需要输出得到我们人眼能看到的字符. 加密aes(xxx) ...

  5. ELBO surgery: yet another way to carve up the variational evidence lower bound

    目录 概 主要内容 Evidence minus posterior KL Average negative energy plus entropy Average term-by-term reco ...

  6. Not All Samples Are Created Equal: Deep Learning with Importance Sampling

    目录 概 主要内容 "代码" Katharopoulos A, Fleuret F. Not All Samples Are Created Equal: Deep Learnin ...

  7. [平台建设] Spark任务的诊断调优

    背景 平台目前大多数任务都是Spark任务,用户在提交Spark作业的时候都要进行的一步动作就是配置spark executor 个数.每个executor 的core 个数以及 executor 的 ...

  8. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  9. Java基础寒假作业-个人所得税计算系统

    <个人所得税计算系统>设计 一.需求说明 设计一个简易的个人所得税计算系统,通过输入个人应发工资计算出各个地区的三险(医疗保险.养老保险)一金(公积金)和个人所得税.系统需要实现用户登录. ...

  10. 云南农业职业技术学院 - 互联网技术学院 - 美和易思《MYSQL 高级查询与编程》 综合机试试卷

    数据库及试题文档下载:https://download.csdn.net/download/weixin_44893902/14503097 目录 题目:电商平台 mysql 数据库系统管理 一. 语 ...