Underscore.js 的模板功能

  Underscore是一個非常實用的JavaScript庫,提供許多編程時需要的功能的支持,他在不擴展任何JavaScript的原生對象的情況下提供很多實用的功能。

  無論你寫一段小的js代碼,還是寫一個大型的HTML5應用,underscore都能幫上忙。目前,underscore已經被廣泛使用,例如,backbone.js唯一強依賴的庫就是underscore.js。

  Underscore.js學習資源:

  Underscore.js 官網:http://underscorejs.org/#each  

  Underscore.js?中文文檔:?http://www.css88.com/doc/underscore/ 

今天主要討論Underscore 的前端模板功能。它的模板功能和前一篇介紹的javascript前端模板是一樣的。對數據的處理更加方便。寫了個小例,供大家參考學習。

完整實例可以通過這個網址下載:http://pan.baidu.com/share/link?shareid=2509652039&uk=688556984

復制代碼
<!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><!--數據 --><script>var datas = [{title: "一九四二",url: "http://www.baidu.com",film:"電影1"},{title: "少年派的漂流",url: "http://www.baidu.com",film:"電影2"},{title: "教父",url: "http://www.baidu.com",film:"電影3"},{title: "肖申克的救贖",url: "http://www.baidu.com",film:"電影4"},{title: "3d2012",url: "http://www.baidu.com",film:"電影5"}];    $("body").html( _.template($("#t2").html(), datas));</script><!--點擊下拉事件--><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
復制代碼

?本文轉自挨踢前端博客園博客,原文鏈接http://www.cnblogs.com/duanhuajian/archive/2012/12/21/2826886.html如需轉載請自行聯系原作者


@挨踢前端

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/256515.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/256515.shtml
英文地址,請注明出處:http://en.pswp.cn/news/256515.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ANSYS——查看剖面圖的應力分布云圖以及工作平面的相關設置

剖面圖和切片圖其實差不多,只是切片圖只有一個截面,而剖面圖是切去一部分保留另一部分模型,不但可以看到截面處應力分布還可以看到剩余模型的應力分布 切片應力云圖可見:https://blog.csdn.net/qq_45769063/article/details/106357700 1.剖面云圖的查看 首先將工作平面的…

2016.8.2

高端內存映射方式 高端內存映射分為三種&#xff1a;永久映射、臨時映射和非連續動態內存映射。高端內存一般是指896MB以上的頁框&#xff0c;這段區間內核一般不能直接訪問。 1.永久映射 永久內核映射允許內核建立高端頁框到內核地址空間的長期映射。它們使用主內核頁表中的一…

深度學習之pytorch(三) C++調用

玩深度學習&#xff0c;個人覺得基于anaconda的python適合開發與測試&#xff0c;C適合實際的工程部署&#xff01;而pytorch官方有編譯好的libtorch&#xff0c;特別方便&#xff0c;適合于我這樣的伸手黨和手殘黨(win10下編譯tensorflow編譯了好久都沒通過&#xff0c;好憂傷…

ANSYS入門——模態分析步驟與實例詳解

目錄 一、ANSYS求解模態分析步驟 建模 施加載荷和求解

javascript庫之Mustache庫使用說明

一、簡單示例 代碼&#xff1a; 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var view { 6 title: YZF, 7 cacl: function () { 8 return …

Light OJ 1007

求區間歐拉函數平方和。。。 最后因為longlong 范圍爆了WA 了&#xff0c; 0.0 #include<bits/stdc.h> using namespace std; const int maxn 5000000 131; typedef unsigned long long LL;bool Com[maxn]; LL Num[maxn], Prim[maxn / 3]; int Cnt;void INIT() {Num[1]…

MVC架構設計——EF-Code First

詳情參考:http://www.cnblogs.com/guomingfeng/archive/2013/05/28/mvc-ef-repository.html轉載于:https://www.cnblogs.com/shuai7boy/p/5807678.html

機器學習(一) 基于sklearn庫的數據集劃分(交叉驗證)

機器學習中首要環節就是數據集的處理&#xff0c;其中數據集的處理從個人理解(如有錯誤敬請諒解)的角度來說包括兩個方面&#xff1a;數據集劃分和數據清理。其中數據集劃分是指訓練集、驗證集和測試集的數據類別劃分&#xff1b;數據清理是指數據的清洗、刪除等等方面。這兩天…

ANSYS——模態分析的理論基礎

目錄 一、模態分析理論基礎 線性與非線性 振動與固有頻率 振動方程與振動模態

購物中心潮--我的創業之路

2014年10一個月&#xff0c;我在中國大陸從北我的兩個小伙伴跑到最南邊中國內地。大半個中國刪除更多。早在北京成立購潮商城。2014年11月&#xff0c;購潮商城正式上線。上線當天突破零訂單。2014年12月&#xff0c;正式推廣市場。滲透大學生校園。2015年2月至今&#xff0c;正…

敏捷項目開源管理軟件ScrumBasic(2)- 多項目支持

1.加入Project對象模型 public class Project{[Key][MaxLength(32)]public string ID { get; set; }public string Name { get; set; }public int Order { get; set; }public ICollection<UserStory> Stories { get; set; }public ApplicationUser Creator { get; set; }…

postgresql表和列注釋(描述)

2019獨角獸企業重金招聘Python工程師標準>>> PostgreSQL添加表和列注釋。本文為測試表test&#xff0c;默認無注釋。 test# \d關聯列表架構模式 | 名稱 | 類型 | 擁有者 | 大小 | 描述 -------------------------------------------------public | test | …

ANSYS——模態提取方法簡介

目錄 block lancoze法 supspace(子空間法) powerdynamics reduced(縮減法) unsymmetric(非對稱法) 阻尼法和QR阻尼法

python 使用小知識總結(持續更新ing)

這篇博客主要針對于使用python來進行深度學習/機器學習過程各方面小知識的總結。習慣于使用C這種嚴謹的語言&#xff0c;改換到python這門相對來說開放式的語言需要很多學習&#xff0c;而作為一個菜雞&#xff0c;遇到編程問題解決了之后不到一周就會忘記&#xff0c;在此僅作…

Fifth scrum meeting - 2015/10/30

概述 從昨天開始&#xff0c;我們的開發工作終于進入了正軌&#xff0c;由于之前沒有mooc服務器API接口&#xff0c;一些工作無法進行。 因為我們團隊開始開發較晚&#xff0c;因此我們將開發階段的截至時間定為了下周五&#xff0c;測試階段則壓縮為下周周六和周日兩天。 我們…

計算機加入域 不能訪問網絡位置 解決辦法

計算機加入域 不能訪問網絡位置 解決辦法 啟動以下服務 本文轉自 onesthan 51CTO博客&#xff0c;原文鏈接&#xff1a;http://blog.51cto.com/91xueit/1660286&#xff0c;如需轉載請自行聯系原作者

ANSYS——模態分析的載荷施加問題以及約束的施加問題

本文續自《ANSYS入門——模態分析步驟與實例詳解》:https://blog.csdn.net/qq_45769063/article/details/106389171 目錄 1.模態分析的激勵是從哪里來的?

【effective c++】繼承與面向對象設計

1.確定你的public繼承塑造出is-a關系 public繼承意味著is-a.適用于base classes身上的每一件事情一定也適用于derived classes身上,因為每一個derived classes對象也都是一個base class對象&#xff0c;反過來不成立。 2.避免隱藏繼承而來的名稱 c名稱查找不考慮類型&#xff0…

Android Camera HAL淺析

1、Camera成像原理介紹 Camera工作流程圖 Camera的成像原理可以簡單概括如下&#xff1a; 景物(SCENE)通過鏡頭&#xff08;LENS&#xff09;生成的光學圖像投射到圖像傳感器(Sensor)表面上&#xff0c;然后轉為電信號&#xff0c;經過A/D&#xff08;模數轉換&#xff09;轉換…

win10 下pycharm+anaconda 編譯生成pyd文件

由于生產部署的問題&#xff0c;需要把用python寫的深度學習代碼編譯為可被調用的文件。上網搜索了下&#xff0c;暫時了解到win10下pyd文件比較流行。下面是直接引用某位博主的結論&#xff0c;個人感覺總結的很好。其中Cython庫將已有的Python代碼轉化為C語言的代碼&#xff…