zoukankan      html  css  js  c++  java
  • 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.

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

      

      

  • 相关阅读:
    盒子垂直水平居中
    Sahi (2) —— https/SSL配置(102 Tutorial)
    Sahi (1) —— 快速入门(101 Tutorial)
    组织分析(1)——介绍
    Java Servlet (1) —— Filter过滤请求与响应
    CAS (8) —— Mac下配置CAS到JBoss EAP 6.4(6.x)的Standalone模式(服务端)
    JBoss Wildfly (1) —— 7.2.0.Final编译
    CAS (7) —— Mac下配置CAS 4.x的JPATicketRegistry(服务端)
    CAS (6) —— Nginx代理模式下浏览器访问CAS服务器网络顺序图详解
    CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/9516091.html
Copyright © 2011-2022 走看看