简单使用:
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>
其他语法:
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 });