zoukankan      html  css  js  c++  java
  • 前端 ----模板引擎

    简单使用:
      1.导入 <script src="template-web.js"></script>
      2.提供需要替换的内容,在type选择text/html,并把要替换的地方用{{}}括起来

    <script type="text/html" id="tp1">
        <div>
            <span>姓名:{{name}}</span>
            <span>年龄:{{age}}</span>
        </div>
    </script>            

      3.替换template方法中,第一个位置为模板编号,第二个为要替换的对象(如data是name:‘张三’)

    1 <script>
    2     var data={
    3         name : '张三',
    4         age : 30
    5         }
    6     var html = template('tp1',data);
    7     //在布局中体现出来
    8     document.getElementById('container').innerHTML=html
    9 </script>        
    View Code

    其他语法:
      1.@:
        如果是 name : <b>'张三'</b>,即想通过b标签加粗张三,就需要{{@name}},否则就会把b标签显示出来
      2.if:
        {{if XXX}}内容{{/if}} 满足显示内容,也可以在中间加入{{else}}
        {{if v1}}内容1{{else if v2}}内容2{{/if}} 如果满足v1显示内容1,如果满足v2显示内容2
      3.循环:
        data=[{name:'张三'},{name:'李四'}],
        {{each targe}}
          {{$index}}{{$value}}
        {{/each}}
      在需要循环的地方加,如:
      {{each data}}
      <div>
        <span>姓名:{{$value.name}}</span>
      </div>
      {{/each}}
    4.导入自定义方法

     1 <div>$imports.dataFormat(time)</div> #使用,要在template方法前使用
     2 //如果方法在全局变量下就可以直接使用,如果方法不在全局变量下,需要导入就像下面
     3 
     4 template.defaults.imports.变量名 = 变量值;
     5 $imports.变量名称
     6 
     7 function dateFormat(未格式化的原始时间){
     8 return '已经格式化好的当前时间'
     9 }
    10 
    11 template.defaults.imports.dateFormat = dateFormat;
    12 <div>$imports.dataFormat(time)</div>

    PS:

    获取ID时应该是 {{$value._id}} 记得加斜杠
    为了防止表单自动提交应该return false

    分类的批量删除

    上传图片的过程:

     1 // 当管理员选择文件的时候 触发事件(点击选择按钮键 input)
     2 $('#feature').on('change', function () {
     3 // 获取到管理员选择到的文件
     4 var file = this.files[0];
     5 // 创建formData对象 实现二进制文件上传
     6 var formData = new FormData();
     7 // 将管理员选择到的文件追加到formData对象中
     8 formData.append('cover', file);
     9 // 实现文章封面图片上传
    10 
    11 $.ajax({
    12     type: 'post',
    13     url: '/upload', --------------------图片上传是upload
    14     data: formData,
    15     // 告诉$.ajax方法不要处理data属性对应的参数
    16     processData: false,
    17     // 告诉$.ajax方法不要设置参数类型
    18     contentType: false,
    19     success: function (response) {
    20         console.log(response)
    21         $('#thumbnail').val(response[0].cover);
    22     }
    23 })
    24 });    
  • 相关阅读:
    汇编语言LAHF和SAHF指令
    JSONHelper
    【CSS】利用宽高比例的媒体查询
    swiftmailer时没有设置https的选项,才可以发送成功。在linux下面
    DevExpress
    IntelliJ IDEA2017 激活方法 最新的激活注册方式方法,破解,密钥
    vue.js 列表追加项写法
    RedisCache 缓存
    时间通用类 datetime
    LogHelper 日志
  • 原文地址:https://www.cnblogs.com/otome/p/13511852.html
Copyright © 2011-2022 走看看