學習在requirejs下如何使用underscore.js模板

時間 2019-11-18

標籤學習 requirejs 如何使用 underscore.js underscore 模板欄目 JavaScript 简体版

原文原文鏈接

近期在學習underscore.js 這個小而美的js庫，是前端 MVC 框架backbone依賴庫，他的模板方法主要應用場景是ajax交互過程到頁面須要大量的字符串拼接，這部分若是一旦不夠仔細就很容易拼錯，而underscore.js的模板很好的解決了這個問題。本身作了個小小的練習，在requirejs下如何使用underscore.js模板。javascript

首頁un.htmlhtml

<!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.jsjava

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();
        }
    })
    
    

})