Underscore is a very useful JavaScript library that provides support for many of the features needed for programming, and he offers a lot of practical functionality without expanding the native objects of any JavaScript.
Whether you write a little bit of JS code, or write a large HTML5 application, underscore can help. At present, underscore has been widely used, for example, backbone.js the only strong dependent library is underscore.js.
Today, we mainly discuss underscore front-end template features. Its template functionality is the same as the JavaScript front-end template described in the previous article. The processing of data is more convenient. Wrote a small example, for everyone to study the reference.
Full instance Download
Copy Code code as follows:
<! DOCTYPE html>
<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>
<body>
</body>
<!--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>
<!--data-->
<script>
var datas = [
{
Title: "1942",
URL: "Http://www.jb51.net",
Film: "Movie 1"
},
{
Title: "The Drift of the young school",
URL: "Http://www.jb51.net",
Film: "Movie 2"
},
{
Title: "Godfather",
URL: "Http://www.jb51.net",
Film: "Movie 3"
},
{
Title: "Shawshank Redemption",
URL: "Http://www.jb51.net",
Film: "Movie 4"
},
{
Title: "3d2012",
URL: "Http://www.jb51.net",
Film: "Movie 5"
}
];
$ ("body"). HTML (_.template ($ ("#t2"). html (), datas);
</script>
<!--click the dropdown event-->
<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
