underscore.js中模板函数应用

Posted 随便写写

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了underscore.js中模板函数应用相关的知识，希望对你有一定的参考价值。

一、使用技术要点

(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中模板函数应用的主要内容，如果未能解决你的问题，请参考以下文章

Underscore.js 的模板功能介绍与应用

如何在underscore.js模板中使用if语句？

模板引擎原理及underscore.js使用

HiShop2.x版本中的上传插件分析，得出所用的模板语言为Underscore.js 1.6.0且自己已修改

backscore.js 真的需要 underscore.js 吗？

underscore js：更智能的列表渲染与每个或替代