读书人

underscore根本用法

发布时间: 2013-11-08 17:52:14 作者: rapoo

underscore基本用法

<div id="result">

</div>

<!-- 导入underscore库 -->

<script type="text/javascript" src="js/underscore.js"></script>

<!-- 设置模板 -->

<script id="template_result" type="text/template">

{{

??? _.each(dataList,function(item){

}}

<p>{%=item.name%}</p>

{{

??? });

}}

</script>

?

<script type="text/javascript">

???????????? // 设置模板解析规则
?? ??? ??? ?_.templateSettings = {
?? ??? ??? ??? ?evaluate:/\{%([\s\S]+?)%\}/g, // {%=val%} 获取变量用法
?? ??? ??? ??? ?interpolate : /\{\{\:(.+?)\}\}/g?? // {{表达式}} 表达式用法
?? ??? ??? ?};

?????????? var dataList = [

???????????? {name:"john"},

???????????? {name:"tom"}

?????????? ];

?????????? // 根据数据填充模板并返回结果HTML

?????????? var resultHTML = _.template($("#template_result").html(), dataList);

?????????? // 将返回结果填充到页面

?????????? $('#result').html(resultHTML);

</script>

读书人网 >Web前端

热点推荐