码迷,mamicode.com
首页 > Web开发 > 详细

underscore.js中模板函数应用

时间:2016-06-27 17:35:30      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:

一、使用技术要点

(1)使用zepto.js的ajax请求;

(2)使用underscore.js的_.template设定模板,模板一般以<script type="text/template"></script>,不是<template></template>

(3)参数是以{data:listObj},而不是listObj

(4)注意each里面data与item的对映

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/underscore.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <div class="page">
      <button onclick="sendAjax()">发送请求</button>
      </div>
    </body>
    <script type="text/template" id="template">
    <%_.each(data,function(item){%>
      <div class="item" style="border: 1px #000 solid;">
        <div class="storeName"><%=item.storeName%></div>
        <div class="telephone"><%=item.telephone%></div>
        <div class="address"><%=item.address%></div>
      </div>
    <%})%>
  </script>
    <script type="text/javascript">
    function sendAjax(options) {
      var parameter=JSON.stringify({"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101});
      $.ajax({
        type:"post",
        url:"https://m.lechebang.cn/gateway/shop/getServiceNetList",
        async:true,
        data:parameter,        //请求参数
        dataType: "json",
        success:function(result){
          var listObj=result.result.storeDetailResults;
          var html=‘‘;
          html=_.template($("#template").html())({data:listObj});
          $(".page").html(html);
        },
      });

    }
    </script>
</html>

 

underscore.js中模板函数应用

标签:

原文地址:http://www.cnblogs.com/lily1010/p/5620596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!