django之js模板插件artTemplate的使用
安装:
方式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的使用的更多相关文章
- js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
- js模板引擎art-template使用方法
art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...
- js模板引擎-art-template常用总结
art-template javascript 模板引擎,官网:https://github.com/aui/art-template 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出 ...
- js模板引擎-art-template常用总结(转)
原文:https://www.cnblogs.com/shiyou00/p/6841801.html art-template javascript 模板引擎,官网:https://github.co ...
- js模板引擎art-Template(以前的artTemplate)
使用js.jquery动态生成html会非常麻烦.现在的模板引擎可以很简单的解决这个问题.比如腾讯出的art-Template 官网:http://aui.github.io/art-template ...
- js模板引擎-art-template常用
art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...
- js模板引擎artTemplate快速上手
腾讯的artTemplate 1,编写模板 (采用script标签并带有属性id和type="text/html") <script id="test" ...
- 性能卓越的js模板引擎--artTemplate
artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mu ...
- 模板插件aTpl.js新增功能
摘要: aTpl.js是一款模板插件,该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式.最近对aTpl.js模板插件增加了新的功能,支持字符串模板,同时增加了 ...
随机推荐
- 【C/C++笔记】友元类函数
最近学了友元,有三个用法: 1友元函数 2友元类 3友元类函数 我发现友元类函数的用法要比上两个用法要严格,不按格式写会各种出错,要把两个类都拆开来写,共分4步. 第一步: class A; //有 ...
- Exploring Architectural Ingredients of Adversarially Robust Deep Neural Networks
目录 概 主要内容 深度 宽度 代码 Huang H., Wang Y., Erfani S., Gu Q., Bailey J. and Ma X. Exploring architectural ...
- KISS原则
Keep It Simple, Stupid 1. 模块性原则:写简单的,通过干净的接口可被连接的部件:2. 清楚原则:清楚要比小聪明好.3. 合并原则:设计能被其它程序连接的程序.4. 分离原则:从 ...
- 牛掰,在IDEA中,你可以安装小傅哥写的插件了!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.承认你优秀很难 很多码农,把路走窄了 捧一个,喷一个,很多码农都不会多一点思路看问题,总是 ...
- JAVA获取上下行网速
JAVA获取上下行网速 package com.iecas.zwterminalstate.util;import java.io.BufferedReader;import java.io.IOEx ...
- 『无为则无心』Python函数 — 29、Python变量和参数传递
目录 1.Python的变量 (1)Python变量不能独立存在 (2)变量是内存中数据的引用 (3)注意点 2.了解变量的引用 3.Python的参数传递(重点) (1)示例 (2)结论 (3)总结 ...
- EasySharding.EFCore 如何设计使用一套代码完成的EFCore Migration 构建Saas系统多租户不同业务需求且满足租户自定义分库分表、数据迁移能力?
下面用一篇文章来完成这些事情 多租户系统的设计单纯的来说业务,一套Saas多租户的系统,面临很多业务复杂性,不同的租户存在不同的业务需求,大部分相同的表结构,那么如何使用EFCore来完成这样的设计呢 ...
- Java|从Integer和int的区别认识包装类
https://blog.csdn.net/darlingwood2013/article/details/96969339?utm_medium=distribute.pc_relevant.non ...
- 不用find,怎样递归地给目录设置700,给文件设置600权限?
https://stackoverflow.com/questions/36553701/how-to-set-permissions-recursively-700-for-folders-and- ...
- 如何检入空文件夹到GitHub
Git 有一个古怪的特性,就是会忽略本地的空文件夹,而不予以检入(check in). 怎样解决呢?办法就是在空文件夹下放置一个 .gitignore 文件.该文件内容以下: # Ignore eve ...