將數據渲染到頁面的方式:模版


  模板中所列舉的命名,都是下面的案例的命名,大家可看具體信息

  1.模板寫法應注意的3個地方 

  

    1.申明的膜版類型:type="text/template";

    2.js代碼應寫在<%  js代碼  %>    里面;html里面的內容該怎么寫,怎么寫;

    3.js讀取值的時候在  <%= date %>      等號左邊不能有空格;

  2.模板使用的3部曲;

  1.獲取模板的內容;    var temp=document.getElementById("temp").innerHtml;              其中innerHTML為重點

  2.將模板添加到數據:var html=_.template(temp);    由於是underscore.js所以需要注意這一步:     var ss=html({date:arr})

  3.將模板插入到指定元素下:document.getElementById("div").innerHtml=ss;

  Underscore模板案例:    

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    
  </head>
  <body>
    <div id="div">

    </div>
  </body>
  </html>
  <script src="underscore.js"></script>
  <script type="text/template" id="temp">
    <% for(var i=0;i<date.length;i++){ %>
      <div>
        <%= date[i] %>
      </div>
    <% } %>
  </script>
  <script>
    var div=document.getElementById("div");
    var temp=document.getElementById("temp").innerHTML;
    var arr=[10,20,30,40];
    var html=_.template(temp)
    var ss=html({date:arr});
    div.innerHTML=ss;
  </script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM