h5学习笔记 weui text/template 使用

本文主要是介绍h5学习笔记 weui text/template 使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

昨天开始尝试一下使用这个，之前使用weui的时候，产生一个列表。通过ajax 获取一个数组列表。这个时候，第一次做的时候采用字符串拼凑的方式将字符串拼凑起来，在当时而言这种做法凑效，但相当痛苦。VueJs有模版，但还没有完整采用vue的文件开发。暂时功力不够，看了一下express ejs通过模版引擎可以很方便替换一些变量。有了这个便利后，实际上结合这个提供text/template 模版方式，间接减轻一下在Js 里面拼凑字符串的编写工作。

定义一个

<script  type="text/template">  //在这里添加需要的html代码，就如往常一样</script>1
2
3
4

<script id="template" type="text/template">     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">          <div class="weui-media-box__hd">                <img class="weui-media-box__thumb" src="<%=pic%>">          </div>          <div class="weui-media-box__bd">                <p><%=title%></p>           </div>     </a></script>1
2
3
4
5
6
7
8
9
10
11

这个时候，我们会填写一下变量的关键字。类似<%=title%>,<%=pic%>
这个有参考ejs命名方式。

一会我们需要获取到相应的script信息，把其使用代替相应的变量，这样子我们的列表信息就可以根据数据来源替换对应字段了。

下面总的代码如下“`

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <link href="http://cdn.bootcss.com/weui/1.1.1/style/weui.css" rel="stylesheet">   <title>微信案例</title></head><style>.weui-media-box_appmsg .weui-media-box__hd {    margin-right: .8em;    width: 80px;    line-height: 80px;}.weui-media-box {    padding: 10px;}</style><script id="template" type="text/template">     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">          <div class="weui-media-box__hd">                <img class="weui-media-box__thumb" src="<%=pic%>">          </div>          <div class="weui-media-box__bd">                <p><%=title%></p>           </div>     </a></script><body><div class="weui-panel weui-panel_access">      <div class="weui-panel__hd">体育热点</div>      <div id="panelBody" class="weui-panel__bd">      </div> </div> <script type="text/javascript">  var templateStr  = document.getElementById('template').innerHTML; // console.log(template);  var panelBody = document.getElementById('panelBody');  var array  = [{title:'勇士对太阳',pic:'https://ks.sinaimg.cn/n/sports/transform/20170218/yxCN-fyarrcc7809590.jpg/w120h90z1l50t1657.jpg'},               {title:'骑士对热火',pic:'https://ks.sinaimg.cn/n/sports/transform/20170218/yxCN-fyarrcc7809590.jpg/w120h90z1l50t1657.jpg'}];   var temp = [];  array.forEach(function(element) {      console.log(element);      temp.push(formatHtml(templateStr,element))   }, this);   panelBody.innerHTML = temp.join(',');  //格式化  function formatHtml(str,obj)  {        return str.replace('<%=title%>',obj.title).replace('<%=pic%>',obj.pic);  } </script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79