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

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

hero82748274

5785人浏览 · 2017-04-07 23:17:14

hero82748274 · 2017-04-07 23:17:14 发布

定义一个

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^