一、开篇

　　下载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. 【Oracle】SCOPE=MEMORY|SPFILE|BOTH

    SCOPE=MEMORY|SPFILE|BOTH 指示了修改参数时的“作用域”: SCOPE=MEMORY :只在实例中修改,重启数据库后此次修改失效. SCOPE=SPFILE :只修改SPFILE ...

  2. js商城倒计时

    js将秒转换为几天几小时几分钟 1 var oldsecond=second = 60,minute=0,hour=0,day=0; minute = parseInt(second/60); //算 ...

  3. 如何设置root登录（滴滴云）

    购买云服务器DC2后,首先进入控制台,找到对应的EIP,如图1所示: 图1 然后使用您终端电脑的远程登录软件登录DC2(Windows系统推荐xshell,Mac电脑推荐iterm2).默认登录用户名 ...

  4. 商品的CRUD操作

    (1)新增商品:新增文档,建立索引 PUT /index/type/id{ "json数据"} PUT /ecommerce/product/1{ "name" ...

  5. java.util.Date日期类通过java语句转换成Sql(这里测试用的是oracle)语句可直接插入（如：insert into）的日期类型

    public void add(Emp emp) throws Exception{ QueryRunner runner = new QueryRunner(JdbcUtil.getDataSour ...

  6. C语言基础 (6) 类型转换，数组与随机数

    复习 1.隐式转换 Double a Int b = 1 A = b //编译器自动转换把b转换为double类型后 再给a赋值(隐式转换) 2.强制类型转换 (变量)类型名 Int a = 1 // ...

  7. CF528D Fuzzy Search (生成函数+FFT)

    题目传送门 题目大意:给你两个只包含A,G,C,T的字符串$S$,$T$,$S$长$T$短,按照如下图方式匹配 解释不明白直接上图 能容错的距离不超过$K$,求能$T$被匹配上的次数 $S$串同一个位 ...

  8. Django入门--模板路径配置及渲染

    模板就是前端的页面,Django把html源码写到模板文件中,然后通过特定方法渲染后交给客户端. 模板路径设置方法有两种,分别是在项目目录下设置以及在应用目录下设置. 模板查找顺序:优先在DIRS设置 ...

  9. c++之vector使用

    Vector是向量模板,C++ STL之一(本质上是一个动态数组).vector是一个动态生长的数组,一开始vector为空时,会给一个初始化的容量 (就是允许的添加个数并申请好内存),当往添加的元素 ...

  10. C#封装成DLL，并在C#中调用

    一.C#封装成DLL 1.在VS中创建项目选择类库,命名 myDll 2.建立好项目后自动生成的代码如下: 代码修改如下,添加自己要封装的C#代码,注意修饰符必须为public using Syste ...