Underscore.js 的模板功能介紹與應(yīng)用
更新時(shí)間：2012年12月24日 17:27:49 作者：
Underscore是一個(gè)非常實(shí)用的JavaScript庫(kù)，提供許多編程時(shí)需要的功能的支持，他在不擴(kuò)展任何JavaScript的原生對(duì)象的情況下提供很多實(shí)用的功能,需要了解的朋友可以詳細(xì)參考下
Underscore是一個(gè)非常實(shí)用的JavaScript庫(kù)，提供許多編程時(shí)需要的功能的支持，他在不擴(kuò)展任何JavaScript的原生對(duì)象的情況下提供很多實(shí)用的功能。
無(wú)論你寫(xiě)一段小的js代碼，還是寫(xiě)一個(gè)大型的HTML5應(yīng)用，underscore都能幫上忙。目前，underscore已經(jīng)被廣泛使用，例如，backbone.js唯一強(qiáng)依賴的庫(kù)就是underscore.js。
今天主要討論Underscore 的前端模板功能。它的模板功能和前一篇介紹的javascript前端模板是一樣的。對(duì)數(shù)據(jù)的處理更加方便。寫(xiě)了個(gè)小例，供大家參考學(xué)習(xí)。
完整實(shí)例下載
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Underscore</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
<script src="underscore.js"></script>
</head>
<body>
</body>
</html>
<!--ace-template demo-->
<script id="t2" type="text/template">
<%_.each(datas, function(item) {%>
<div class="outer">
<div class="title">
<span ><%=item.film%></span>
</div>
<ul class="ul">
<%_.each(datas, function(item) {%>
<li>
<a href="<%=item.url%>">【<%=item.title%>】</a>
</li>
<%});%>
</ul>
</div>
<%});%>
</script>
<!--數(shù)據(jù) -->
<script>
var datas = [
{
title: "一九四二",
url: "http://m.fzitv.net",
film:"電影1"
},
{
title: "少年派的漂流",
url: "http://m.fzitv.net",
film:"電影2"
},
{
title: "教父",
url: "http://m.fzitv.net",
film:"電影3"
},
{
title: "肖申克的救贖",
url: "http://m.fzitv.net",
film:"電影4"
},
{
title: "3d2012",
url: "http://m.fzitv.net",
film:"電影5"
}
];
$("body").html( _.template($("#t2").html(), datas));
</script>
<!--點(diǎn)擊下拉事件-->
<script type="text/javascript">
$('.ul').hide();
$('.ul>li:last-child').addClass('last-li');
$('body>div:first-child>ul').show();
$('.title').click(function(){
$(this).siblings().toggle();
$(this).parent().siblings().children('.bbs-nav-ul').hide();
}) $('.title').hover(function(){
$(this).toggleClass('hover');
})
$('.ul>li').hover(function(){
$(this).toggleClass('hover');
})
</script
無(wú)論你寫(xiě)一段小的js代碼，還是寫(xiě)一個(gè)大型的HTML5應(yīng)用，underscore都能幫上忙。目前，underscore已經(jīng)被廣泛使用，例如，backbone.js唯一強(qiáng)依賴的庫(kù)就是underscore.js。
今天主要討論Underscore 的前端模板功能。它的模板功能和前一篇介紹的javascript前端模板是一樣的。對(duì)數(shù)據(jù)的處理更加方便。寫(xiě)了個(gè)小例，供大家參考學(xué)習(xí)。
完整實(shí)例下載
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Underscore</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
<script src="underscore.js"></script>
</head>
<body>
</body>
</html>
<!--ace-template demo-->
<script id="t2" type="text/template">
<%_.each(datas, function(item) {%>
<div class="outer">
<div class="title">
<span ><%=item.film%></span>
</div>
<ul class="ul">
<%_.each(datas, function(item) {%>
<li>
<a href="<%=item.url%>">【<%=item.title%>】</a>
</li>
<%});%>
</ul>
</div>
<%});%>
</script>
<!--數(shù)據(jù) -->
<script>
var datas = [
{
title: "一九四二",
url: "http://m.fzitv.net",
film:"電影1"
},
{
title: "少年派的漂流",
url: "http://m.fzitv.net",
film:"電影2"
},
{
title: "教父",
url: "http://m.fzitv.net",
film:"電影3"
},
{
title: "肖申克的救贖",
url: "http://m.fzitv.net",
film:"電影4"
},
{
title: "3d2012",
url: "http://m.fzitv.net",
film:"電影5"
}
];
$("body").html( _.template($("#t2").html(), datas));
</script>
<!--點(diǎn)擊下拉事件-->
<script type="text/javascript">
$('.ul').hide();
$('.ul>li:last-child').addClass('last-li');
$('body>div:first-child>ul').show();
$('.title').click(function(){
$(this).siblings().toggle();
$(this).parent().siblings().children('.bbs-nav-ul').hide();
}) $('.title').hover(function(){
$(this).toggleClass('hover');
})
$('.ul>li').hover(function(){
$(this).toggleClass('hover');
})
</script
您可能感興趣的文章:
- JavaScript模板引擎應(yīng)用場(chǎng)景及實(shí)現(xiàn)原理詳解
- JavaScript構(gòu)建自己的模板小引擎示例
- JavaScript模板引擎Template.js使用詳解
- JS Excel讀取和寫(xiě)入操作（模板操作）實(shí)現(xiàn)代碼
- JS模板實(shí)現(xiàn)方法
- javascript輕量級(jí)模板引擎juicer使用指南
- NodeJS框架Express的模板視圖機(jī)制分析
- 詳解JavaScript ES6中的模板字符串
- 基于jQuery的AJAX和JSON實(shí)現(xiàn)純html數(shù)據(jù)模板
- Node.js的Web模板引擎ejs的入門(mén)使用教程
- JavaScript模板引擎實(shí)現(xiàn)原理實(shí)例詳解
相關(guān)文章
2007-05-05
js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果
這篇文章主要為大家詳細(xì)介紹了js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
深入理解JavaScript中的宏任務(wù)和微任務(wù)機(jī)制
JavaScript中的任務(wù)分為宏任務(wù)和微任務(wù)，它們的執(zhí)行順序會(huì)影響代碼的執(zhí)行結(jié)果。了解它們的機(jī)制可以幫助我們更好地理解事件循環(huán)和異步編程，避免出現(xiàn)一些意想不到的錯(cuò)誤2023-05-05
我們?cè)趀charts表中經(jīng)常會(huì)出現(xiàn)X軸的信息顯示不完全的情況,所以本文小編給大家介紹了echarts X軸顯示不全的處理方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)拖動(dòng)的方法有很多，在本文將為大家介紹下使用getBoundingClientRect()方法是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強(qiáng)版的字符串，用反引號(hào)(`)標(biāo)識(shí)，它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量,需要的朋友可以參考下2023-06-06
javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(五)可移動(dòng)地圖的實(shí)現(xiàn)
首先來(lái)說(shuō)，我對(duì)游戲開(kāi)發(fā)可以算是不怎么深入，因?yàn)楝F(xiàn)在的程序員愛(ài)用canvas，我卻就只會(huì)拿幾個(gè)div湊和。不過(guò)沒(méi)關(guān)系，因?yàn)樽龀鰜?lái)的同樣是游戲。哈！廢話最近有點(diǎn)多，感興趣的朋友可以了解下2013-01-01
這篇文章介紹了Javascript發(fā)布訂閱模式，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于pdfh5.js的使用方法以及解決遇到的坑的解決辦法,pdfh5.js基于pdf.js和jQuery,web/h5/移動(dòng)端PDF預(yù)覽手勢(shì)縮放插件,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了JS快速排序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04