javascript数据绑定在页面上显示lodash

来源：互联网发布：可牛影像mac版编辑：程序博客网时间：2024/04/25 02:17

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

<script src="lodash.underscore.min.js"></script>
<script type="text/temple" id='demoTpl'>
<% _.forEach(dataItem, function(x,i) { %>
<li>
<%= x.massage %>
来自于username=<%= username %>
<p>时间是<%- showDate(x.arriveTime) %></p>
</li>

<% }); %>
</script>

<script type="text/javascript">
var strHtml="";
var data={
username:111,
dataItem:[
{
massage:'123',
arriveTime:'2014-11-08'
},
{
massage:'abc',
arriveTime:'2014-11-12'
},
{
massage:'汉字汉字',
arriveTime:'2015-11-28'
},
{
massage:'2015-05-09',
arriveTime:'2015-01-08'
}
]
};
strHtml=_.template(document.getElementById('demoTpl').innerHTML,data);
document.getElementById('demoUl').innerHTML=strHtml;

//demo2 http://lodashjs.com/docs/
function showDate(date){
var arr=date.split('');arr.splice(4,1,'年');arr.splice(7,1,'月');arr.splice(10,0,'日');arr=arr.join('');
return arr;
}

_.uniq([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lodash.underscore.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul id="demoUl"></ul>
</body>
<script type="text/temple" id='demoTpl'>
<% _.forEach(dataItem, function(x,i) { %>
<li>
<%= x.massage %>
来自于username=<%= username %>
<p>时间是<%= x.arriveTime %> </p>
<p>时间是<%= x.name %> </p>
</li>

<% }); %>
</script>
<script type="text/javascript">
var strHtml="";
var data={
username:111,
dataItem:[
{
massage:'123',
arriveTime:'2014-11-08',
name:11111
},
{
massage:'abc',
arriveTime:'2014-11-12',
name:11111
},
{
massage:'汉字汉字',
arriveTime:'2015-11-28',
name:11111
},
{
massage:'2015-05-09',
arriveTime:'2015-01-08',
name:11111
}
]
};
strHtml=_.template($('#demoTpl').text(),data);
$('#demoUl').html(strHtml)
</script>
</html>

0 0