一、开篇

　　下载underscode.js

二、使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="underscore.js"></script>

    <script src="jq.js"></script>

    <title>Document</title>

</head>

<body>

        <ul id="element"></ul>

        <!-- 定义模板，将模板内容放到一个script标签中 -->

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

            <% for(var i = 0; i < data.list.length; i++) { %>

                <% var item = list[i] %>

                <li>

                    <span><%=item.firstName%> <%=item.lastName%></span>

                    <span><%-item.city%></span>

                </li>

            <% } %>

        </script>

</body>

</html>

<script>

    // 获取渲染元素和模板内容

    var element = $('#element'),

            tpl = $('#tpl').html();    

        // 创建数据, 这些数据可能是你从服务器获取的

        var data = {

            list: [

                {firstName: 'dirk', lastName: 'San', city: 'Shanghai'},

                {firstName: 'Li', lastName: 'Si', city: 'sz'},

                {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},

                {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}

            ]

        }    

      // 解析模板, 返回解析后的内容

       var render = _.template(tpl);

       var html = render(data);

      // 将解析后的内容填充到渲染元素

       element.html(html);

</script>

三、效果

Underscore模板的使用的更多相关文章

  1. require.js+knockout.js+.underscore模板引擎的使用

    第一种使用方式: HTML: <ul data-bind="template: { name: 'peopleList' }"></ul> <scri ...

  2. knockout.js模板绑定之利用Underscore.js模板引擎示例

    View代码 <h1>People</h1> <ul data-bind="template: { name: 'peopleList' }"> ...

  3. underscore源码解析 (转载)

    转载出自http://www.cnblogs.com/human/p/3273616.html (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j ...

  4. 【初探Underscore】再说模版引擎

    前言 Underscore 是一个JavaScript实用库,提供了类似Prototype.js (或 Ruby)的一些功能,但是没有扩展任何JavaScript内置对象. 它弥补了部分jQuery没 ...

  5. underscore源码解析

    (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.js中表示global对象 var root = this; // 保存"_" ...

  6. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  7. KnockOut文档--模板绑定

    目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Na ...

  8. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  9. Underscore.js 1.3.3 中文解释

    // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is freely ...

随机推荐

  1. ubuntu16 mysql 远程连接

    打开配置文件: sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 将下面一行注释掉: # bind-address = localhost 重启服务 sudo s ...

  2. java函数式编程之lambda表达式

    作为比较老牌的面向对象的编程语言java,在对函数式编程的支持上一直不温不火. 认为面向对象式编程就应该纯粹的面向对象,于是经常看到这样的写法:如果你想写一个方法,那么就必须把它放到一个类里面,然后n ...

  3. Python快速定位工作目录

    原文链接:http://www.cnblogs.com/wdong/archive/2010/08/19/1802951.html 常年奋斗在编码一线的同学,应该都深有体会,工作久了,很多项目文件.技 ...

  4. css—文字渐变色

    .text-gradient { display: inline-block; color: green; font-size: 10em; font-family: ´微软雅黑´; backgrou ...

  5. Ad_hoc_polymorphism 备份

    https://en.wikipedia.org/wiki/Polymorphism_(computer_science) https://en.wikipedia.org/wiki/Ad_hoc_p ...

  6. with as递归调用

    一.递归调用--在代码中偶尔看到以记之,便于下次学习 https://blog.csdn.net/johnf_nash/article/details/78681060 --查询节点及其下所有子节点 ...

  7. Project Euler 15 Lattice paths

    题意:在20×20方阵中从起点出发只允许向右或向下移动到达终点的路径有多少条. 思路:每次只能向右或者向下,总共 40 步,也就是 40 步中每一步都有两种选择,也就是 C (40 , 20) . 为 ...

  8. HDU2147 - kiki's game 【巴什博弈】

    Recently kiki has nothing to do. While she is bored, an idea appears in his mind, she just playes th ...

  9. P1828 香甜的黄油 Sweet Butter （spfa）

    题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧场上,他知道N(1<=N<=500)只奶牛会过来舔它,这样就能做出能卖好价钱的超甜黄油.当然,他将付出额外的费 ...

  10. Flask-SQLAlchemy中解决数据库连接1366报错

    报错信息:Warning: (1366, "Incorrect string value: '\\xD6\\xD0\\xB9\\xFA\\xB1\\xEA...' for column 'V ...