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" >
        {% 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 >增加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" ></body>

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

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

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

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：django之js模板插件artTemplate的使用 - Python技术站

django之js模板插件artTemplate的使用

相关文章