一、开篇

　　下载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. Java I/O streams

    I/O Streams Byte Streams 输入输出以字节为单位,所有的使用字节流的类都继承自 InputStream 和 OutputStream. Byte Streams 属于 low-l ...

  2. Java数组的运用

    Java数组 应用1: 大乐透彩票模拟器: 规则: 前区01-35中随机生成5个号码 后区01-12中随机生成2个号码 模拟操作,系统自动生成号码组合,并且按从小到大的顺序输出结果 同时要求可以选择生 ...

  3. bootstrap初用新得1

    ## 基本准备 1. 首先把相关软件窗口规划好,对于我的喜好,我喜欢把除了浏览器外的其他软件分为左右两个半屏.左边和右边很多软件之间是需要配合使用的:     * 左边: scss文件,ps的guid ...

  4. js FormData 的使用

    <div> <input type="file" name="filename" multiple="multiple" ...

  5. ZBrush细说3D海盗角色的创建艺术

    一提到海盗,就不由自主想到了<加勒比海盗>,那个帅得一塌糊涂的杰克船长更是让人夜不能寐寝难安,但在艺术的世界里,角色无美丑,今天我们要讲的这位海盗,就与“帅气”八竿子打不着了,它甚至有点古 ...

  6. 【转】ORACLE SQL基础—DDL语言 礼记八目 2017-12-23 21:26:21

    原文地址:https://www.toutiao.com/i6502733303550837261/ SQL语言分为:DDL数据定义语言,DML数据操纵语言,DCL是数据库控制语言,TC事务控制语言 ...

  7. cent os 安装mariaDB / mySQL 之后初始化的命令

      #安装mysql mysql-server,默认安装的是开源的mariaDB和它的server,mariadb-server,安装源中可能有找不到的,就换个名字再找找 yum install -y ...

  8. WEBGL学习【十】运动模型

    <!DOCTYPE HTML> <html lang="en"> <head> <title>LWEBGL6.2, Animated ...

  9. 原生node实现简易留言板

    原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...

  10. [网络流24题] 太空飞行计划问题 (最大流->最大权闭合图)

    洛谷传送门 LOJ传送门 做这道题之前建议先看这篇论文,虽然论文里很多地方用了很多术语,但hbt神犇讲得很明白 这篇题解更加偏向于感性理解 把问题放到二分图上,左侧一列点是实验,权值为$p[i]$,右 ...