artTemplate学习笔记

1. 表达式

   {{}}

2. js中存放模板

   var source =  '<ul>'
   +    '<% for (var i = 0; i < list.length; i ++) { %>'
   +        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
   +    '<% } %>'
   + '</ul>';
    var render = template.compile(source);
   var html = render({
     list:['sheyig','dianying','minyao','lvxing'];
   })
   document.getElementById('content').innerHTML=html;
   

   ​

3. 使用

   <script type="text/html" id="test">
    ...模板
   </script>
   
   <script>
   var data={
     ...
   };
   var html = template("test",data);
   </script>
   

   ​

4. 输出内容

   {{content}}
   {{#content}} //不输出表达式
   

5. 条件表达式:写成类似于标签的形式 {{if}} {{/if}} 包裹内容判断

   {{if admin}}
    <p>admin</p>
   {{else if code}}
    <p>master</p>
   {{else}}
   <p>error</p>
   {{/if}}
   

6. 遍历,通过 {{each}} {{/each}} 包裹表达式

   //简写
   {{each list}}
   <li>{{$index}}-{{$value.user}}</li>
   {{/each}}
   
   //另一种形式
   {{each list as value}}
    <li>{{index}}{{value}}<li>
   {{/each}}
   

7. 嵌入子模板:include

   {{include 'template_name' data}}
   

8. 辅助方法:用template.helper(name,callback) 注册方法 (类似于angular过滤器)

   template.helper('dataFormate',function(){
     return value;
   })
   //使用方法
   {{time | dataFormate: 'yy--MM-dd hh:mm:ss'}}
   

---

template.config(name,value):更改引擎的默认配置

字段	类型	默认值	说明
openTag	String	'{{'	逻辑语法开始标签
closeTag	String	"}}"	逻辑语法结束标签
escape	Boolean	true	是否编码输出 HTML 字符
cache	Boolean	true	是否开启缓存（依赖 options 的 filename 字段）
compress	Boolean	false	是否压缩 HTML 多余空白字符

---

dataTables使用

1. 基本使用

   <table id="test" class="display"></table>
   <script>
    $(document).ready(function(){
         $('#test').DataTable();
    })
   </script>
   

2. 加载数据

   //加载对象数据,一定要配置colums,并且配置每列对应的属性
   $('#test').DataTable({
     data:data,
     colums:[
            { data:'name'},
            {data:'position'},
     ]
   })
   //注意on绑定事件的后面选择器相当于过滤
   $(#table).on('click','tr',function(){
   //this指向tr
     if($(this).hasClass('selected')){
       $(this).removeClass('selected');
     }
   })
   //ajax使用
   $('#test').dataTable({
    ' ajax':{
       'url':'',
       'dataSrc':
     },
     'columns':{
       
     }
   })
   

toastr使用

1. 引入样式和脚本

2. 配置选项:

                    toastr.options = {
                      "closeButton": false,
                      "debug": false,
                      "newestOnTop": false,
                      "progressBar": false,
                      "positionClass": "toast-top-right",
                      "preventDuplicates": false,
                      "onclick": null,
                      "showDuration": "300",
                      "hideDuration": "1000",
                      "timeOut": "5000",
                      "extendedTimeOut": "1000",
                      "showEasing": "swing",
                      "hideEasing": "linear",
                      "showMethod": "fadeIn",
                      "hideMethod": "fadeOut"
                    }

3. 调用

     toastr.warning('title','warning-content')//警告
     toastr.info('显示信息');
     toastr.error('错误信息');
     toastr.success('成功');
     toastr.clear()//清除当前的列表


     ```