您的位置：首页 > 产品设计 > UI/UE

h5学习笔记：weui text/template 使用

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

定义一个

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

</script>


<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>


这个时候，我们会填写一下变量的关键字。类似<%=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航