安装:

  方式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】598. Range Addition II 解题报告(Python)

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

  2. 【剑指Offer】10- I. 斐波那契数列 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人微信公众号:负雪明烛 目录 题目描述 解题方法 递归 动态规划 日期 题目地址:htt ...

  3. 【LeetCode】516. Longest Palindromic Subsequence 最长回文子序列

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 代码 刷题心得 日期 题目地址:https://le ...

  4. hdu-5569matrix(dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=5569; 题目意思: 从(1,1)点出发只能向右和向下走,到达(n,n)点时所得到的价值最小, 价值是Let th ...

  5. Windows服务注册(需要指定config文件的情况下)

    最近,遇到一个问题:需要将telegraf在Win平台下注册为windows服务(避免误操作关闭CMD窗口): 尝试了网上的几种注册Windows服务的方法,发现无法将telegraf这种需要在CMD ...

  6. Java高级程序设计笔记 • 【第6章 设计模式】

    全部章节   >>>> 本章目录 6.1 设计模式 6.1.1 设计模式概述和分类 6.1.2 单列模式介绍 6.1.3 单例模式的实现 6.1.4 实践练习 6.2 单例模式 ...

  7. Foxmail:‘错误信息:由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败’的解决办法

    每日必开-Foxmail 但是有连续半个多月未收到1封邮件 心想 大过年的 大家都不发邮件了 么 并未特别在意 直到该接收工资条的日子 我的Foxmail依然毫无动静 点了一下 收取 结果报如下错误: ...

  8. 初识python: 回调函数

    回调函数 简单理解就是:将一个函数通过参数的形式传递给另一个函数 #!/user/bin env python # author:Simple-Sir # time:2019/8/9 10:49 # ...

  9. Appium安装部署

    一.安装JDK 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html JD ...

  10. git branch --set-upstream-to 本地关联远程分支

    最近使用git pull的时候多次碰见下面的情况: There is no tracking information for the current branch. Please specify wh ...