将数据渲染到页面的方式:模版

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

  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模板案例:    

扫描二维码关注公众号,回复: 5527496 查看本文章

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

猜你喜欢

转载自www.cnblogs.com/liancai001/p/10527888.html