近期在学习underscore.js 这个小而美的js库，是前端 MVC 框架backbone依赖库，他的模板方法主要应用场景是ajax交互过程到页面需要大量的字符串拼接，这部分如果一旦不够仔细就很容易拼错，而underscore.js的模板很好的解决了这个问题。自己做了个小小的练习，在requirejs下如何使用underscore.js模板。

首页un.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>underscore.js</title>

</head>

<body>

    <div id="wraper">111</div>

   <script data-main="js/un" src="require.js"></script> <!-- data-main 指定的入口函数 -->

    <script type="text/javascript">

        require.config({

            baseUrl:'js',//指定目录

            paths:{

                jquery:'static/jquery-1.10.2.min',//指定jquery位置

                underscore:'static/underscore'　　//指定underscore位置

            },

            urlArgs: "bust=" +  (new Date()).getTime() //时间戳，清缓存的

        })

    </script>

    <script type="text/template" id="tpl"><!-- underscore.js  id是钩子 注意是text/template -->

    <%_.each(obj,function(item){%>

          <ul>

              <li>

                  <a href="<%=item.url%>">

                      <%=item.name %>

                  </a>

                  <span><%=item.time%></span>

                  <%if(item.sub !== ''){%>

                      <%_.each(item.sub,function(k){%>

                          <b><a data-id=<%=k.id%> href="javascript:;" class="b"><%=k.name%></a></b>

                      <%})%>

                  <%}else{%>

                  <%}%>

              </li>

          </ul>

      <%})%>

    </script>

</body>

</html>

我将requirejs 放到了 与 un.html平行的目录  具体到项目中 可能就不能这样放了。

下面是un.js

require(['jquery','underscore','cache'],function($,U,C){    //指定了依赖jq,underscore ,cache

　　C.putCode(); //应用cache.js的东西 练习用的 没有实际意义。

    var data = [

                    {id:11,name:'aaa',age:31,url:'http://www.baidu.com',time:'12345',sub:[{id:'9999',name:'删除'},{id:8888,name:'删除'},{id:7777,name:'删除'}]},

                    {id:23,name:'bbb',age:66,url:'http://www.qiban365.com',time:'021545'},

                    {id:24,name:'ccc',age:99,url:'http://www.cnblogs.com',time:'45456456456'}

               ];

    var text = _.template($('#tpl').html());

    $("#wraper").html(text(data));

    //$("#wraper").html(_.template($("#tpl").html(),data));//这个不好使

    $(document).on('click','.b',function(){   //冒泡点击事件

        console.log($(this).attr('data-id'));

        if($(this).length !== ''){

            $(this).remove();

        }

    })

})

学习在requirejs下如何使用underscore.js模板的更多相关文章

  1. knockout.js模板绑定之利用Underscore.js模板引擎示例

    View代码 <h1>People</h1> <ul data-bind="template: { name: 'peopleList' }"> ...

  2. Underscore.js 源码学习笔记（上）

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  3. Underscore.js 初探

    一. 简介   Underscore 这个单词的意思是“下划线”.   Underscore.js 是一个 JavaScript 工具库,提供了一整套的辅助方法供你使用.   Think that - ...

  4. Underscore.js 源码学习笔记（下）

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  5. underscore.js学习笔记

    一.理清概念 1.Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率,Underscore还可以被使用在Node.js运行环境.从API中,你已经可以看出,Unders ...

  6. 如何应用r.js对requirejs下的js代码合并

    1.在根目录新建build.js ({ baseUrl:'js', paths:{ jquery:'static/jquery-1.10.2.min', underscore:'static/unde ...

  7. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  8. underscore.js 源码

    underscore.js 源码 underscore]JavaScript 中如何判断两个元素是否 "相同" Why underscore 最近开始看 underscore.js ...

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

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下   U ...

随机推荐

  1. [BZOJ] 5415: [Noi2018]归程

    在做Kruskal求最小生成树时,假设要通过边权\(w\)的边合并子树\(x\)和\(y\),我们新建一个方点,把两个子树接到这个方点上,并将方点的点权赋为\(w\),最终形成的二叉树就是\(Krus ...

  2. Protobuf有没有比JSON快5倍？用代码来击破pb性能神话

    转 http://www.sohu.com/a/136487507_505779 2017-04-26 07:58 程序设计 /58 /技术 导读:Google 的 Protocol Buffers ...

  3. node中的定时任务

    node-schedule每次都是通过新建一个scheduleJob对象来执行具体方法. 时间数值按下表表示 * * * * * * ┬ ┬ ┬ ┬ ┬ ┬ │ │ │ │ │ | │ │ │ │ │ ...

  4. 日志切割logrotate和定时任务crontab详解

    1.关于日志切割 日志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到.对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了个问题.除此之外,处 ...

  5. phpExcel使用方法一

    include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/Writer/Excel5 ...

  6. 使用GD库做图片水印

    png图片作为水印加到其他类型图片后,背景变黑色 原因: imagecopy函数拷贝时可以保留png图像的原透明信息,而imagecopymerge却不支持图片的本身的透明拷贝. 然后直接上代码: / ...

  7. python基本操作（五）

    if 判断 if 条件: 代码1 代码2 代码3 代码块(同一缩进级别的代码,例如代码1.代码2和代码3是相同缩进的代码,这三个代码组合在一起就是一个代码块,相同缩进的代码会自上而下的运行) cls ...

  8. Hibernate知识梳理

    一.SessionFactory接口 是单个数据库映射关系(ORM)经过编译后的内存镜像.SessionFactory(的实例)作为应用中的一个全局对象(工厂),可以随处打开/创建一个session, ...

  9. Python中变量的作用域

    一.变量作用域的含义 变量的作用域说白了就是变量的值从哪里获取,或者说变量取值的地方 我们在写代码过程中会用到很多变量,这些变量会出现在各种代码块中,有的出现在函数块里,有的在函数块外,例如: def ...

  10. Python之路-时间模块

    time模块 import time 时间戳(time.time())--结构化时间(time.localtime)--字符串时间(time.strftime) import time print(t ...