天天看點

關于 underscore 中模闆引擎的應用示範樣例

//關于 underscore 中模闆引擎的應用示範樣例 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>關于 underscore 中模闆引擎的應用示範樣例</title> </head> <body> <ul id="test"></ul> <script type="text/template" id="tpl"> <% for(var i = 0; i < list.length; i++) { %> <% var item = list[i] %> <li> <span><%=item.firstName%> <%=item.lastName%></span> <span><%-item.city%></span> </li> <% } %> </script> <script src="sea.js"></script> <script> seajs.config({ paths: { 'baiducdn': 'http://libs.baidu.com', '360cdn': 'http://libs.useso.com/', 'freecdn': 'http://libs.cncdn.cn/', 'sinacdn': 'http://lib.sinaapp.com/', }, alias: { 'jquery': 'baiducdn/jquery/2.0.3/jquery.min.js', 'backbone': 'baiducdn/backbone/0.9.2/backbone-min.js', 'underscore': 'baiducdn/underscore/1.3.3/underscore-min.js', }, }); seajs.use(['jquery', 'underscore'], function(){ var testObj = $('#test'), tpl = $('#tpl').html(); //準備資料,能夠通過JSON來自server var data = { list: [ {firstName: 'Li', lastName: 'Yunlong', city: '濟南'}, {firstName: 'Wang', lastName: 'Yunlong', city: '北京'}, ] }; var html = _.template(tpl, data);//解析模闆 testObj.html(html); }); </script> </body> </html>

轉載于:https://www.cnblogs.com/llguanli/p/8525601.html

繼續閱讀