学习在requirejs下如何使用underscore.js模板

近期在学习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();
        }
    })
    
    

})

posted on 2015-11-24 16:55 小武爷阅读(610) 评论(0) 编辑收藏举报