一、使用技术要点

(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中模板函数应用的更多相关文章

  1. underscore.js中的节流函数debounce及trottle

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

  2. Underscore.js 的模板功能

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能. 无论你写一段小的js代码,还是写一 ...

  3. JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype

    一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...

  4. js中的函数，Date对象，Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

  5. js中getByClass()函数

    js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...

  6. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  7. node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...

  8. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  9. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

随机推荐

  1. CMDB与自动化运维,一切尽在掌握中?

    生产力跟不上生产的速度时,就会出现很多问题,如何针对问题进行处理,制定什么样的计划,如何解决就是需要思考的难点? T运维的分类 IT运维,指的是对已经搭建好的网络,软件,硬件进行维护.运维领域也是细分 ...

  2. 洛谷——P2404 自然数的拆分问题

    题目背景 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. 题目描述 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. 输入输出格式 输入格式: 输入:待拆分的自然数n ...

  3. SD 胡策 Round 1 T3 彩尾巴猹的二进制数

    发现一个区间[L,R]代表的2进制数是3的倍数,当且仅当从L开始的后缀二进制值 - 从R+1开始的后缀二进制值 是 3 的倍数 (具体证明因为太简单而被屏蔽). 于是我们就可以在每个点维护从它开始的后 ...

  4. HTTPS协议工作流程

    被问到了,复习一下HTTPS的工作流程 提到https,不得不提SSL SSL 1.        安全套接字(Secure Socket Layer,SSL)协议是Web浏览器与Web服务器之间安全 ...

  5. 用hashmap实现自己的缓存

    @SuppressWarnings({"unchecked", "rawtypes"})public class DefaultCache implements ...

  6. jenkins执行单元测试，会产生大量临时文件，要及时删除，不然会把inode耗尽

    jenkins的build命令:clean test -U findbugs:findbugs pmd:pmd sonar:sonar -Djava.io.tmpdir=/tmp/ -Dsonar.p ...

  7. VS&quot;后生成事件&quot; 菜单的使用

    网上有很多的文章都在介绍怎样创建一个自己定义的dll文件,以及怎样使用一个dll文件,在此不在赘述.本文主要介绍怎样使用VS2008的"生成后事件"的命令行,将一个dll文件直接复 ...

  8. [Django] 查看orm自己主动运行的原始查询sql

    django的文档看了非常多.也用了不少,有的时候感觉性能非常不好,知道非常多地方是惰性查询.可是对于复杂的逻辑.仅仅是表面上发现执行非常慢,机器资源消耗非常多.却不知道orm究竟是什么来转化成sql ...

  9. LattePanda 项目之 P2.2 起飞条件检测系统（CLI & GUI）

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...

  10. 【iOS】UIWebView的HTML5扩展之canvas篇

    先前公布大那个所谓的"HTML5"扩展严格说来还算不是"HTML5".曲曲几行JS代码就自诩为HTML5扩展多少有些标题党的嫌疑. 而相比之下,本篇的主题can ...