直接用 script 引入文件：

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

是使用 render 来直接渲染文件，这种方式支持继承(extends)和包含(include)模板。使用之前需要配置文件的路径：

nunjucks.configure('views', { autoescape: true });

nunjucks.render('index.html', { foo: 'bar' });

在 node 端，'views' 为相对于当前工作目录 (working directory) 的路径。在浏览器端则为一个相对的 url，最好指定为绝对路径 (如 '/views')。

项目的目录结构如下：

其中：

主页 index.html

<!DOCTYPE html>

<html>

<head>

    <title>nunjucks 应用</title>

    <meta http-equiv="Access-Control-Allow-Origin" content="*">

</head>

<body>

<div class="contain">

    123

</div>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<script type="text/javascript" src="js/nunjucks.js"></script>

<script type="text/javascript" src="js/app.js"></script>

</body>

</html>

模板 tem_data.html ：

<div class="main">

    <table class="data-show">

        <th class="thead">

            <td class="name">名字</td>

            <td class="area_id">地区编号</td>

            <td class="area_name">地区名称</td>

            <td class="river_name">河流名称</td>

        </th>

         {% for item in data %}

        <tr>

            <td >{{item.name}}</td>

            <td >{{item.area_id}}</td>

            <td >{{item.area_name}}</td>

            <td >{{item.river_name}}</td>

        </tr>

         {% endfor %}

    </table>

</div>

app.js：

  var data=[{

extra: { },

time: "2016-09-29T08:00:00",

val: 195,

level_index: 5,

id: "71552116",

name: "日溪乡汶石",

lng: 119.1921,

lat: 26.3158,

type: "PP",

type_name: "雨量站",

subjection: "防汛",

area_id: "350111",

area_name: "晋安区",

river_name: "闽江",

water_system: "闽江",

station_position: 0,

city_code: "350100",

city_name: "福州市"

},

{

extra: { },

time: "2016-09-29T16:00:00",

val: 192,

level_index: 5,

id: "71502056",

name: "寿山乡红寮",

lng: 119.237221,

lat: 26.220278,

type: "ZZ",

type_name: "河道水位站",

subjection: "防汛",

area_id: "350111",

area_name: "晋安区",

river_name: "寿山乡红寮",

water_system: "寿山乡红寮",

station_position: 0,

city_code: "350100",

city_name: "福州市"}];

nunjucks.configure('http://127.0.0.1:8080/template',{autoescape:true});

var html = nunjucks.render('tem_data.html',{data:data});

//document.getElementsByClassName("contain").innerHTML=html;  //nocan

 $(".contain").append(html);//yes

//console.log(html);

为了能够成功渲染，需要修改端口：

（通过输入命令：npm install -g http-server）

 

nunjucks.js模板渲染的更多相关文章

  1. jquery jtemplates.js模板渲染引擎的详细用法第三篇

    jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...

  2. jquery jtemplates.js模板渲染引擎的详细用法第二篇

    jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...

  3. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  4. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  5. js模板（template.js）实现页面动态渲染

    template.js是由纯JavaScript编写的第三方模板引擎.点击https://github.com/yanhaijing/template.js可进行下载. 在页头导入模板文件 <s ...

  6. 如何在微信小程序的模板渲染中使用JS？

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

  7. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

  8. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  9. 【nodejs笔记3】Express基本用法，和路由控制，和模板渲染ejs

    1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', ...

随机推荐

  1. CSS 3 颜色表示法

    1,Color Name:red    优点:方便记忆  缺点:数量少不支持透明度 2,HEX方式:#FFFFFF    优点:颜色种类多   缺点:换算复杂需要借助工具 3,RGB方式:rgb(25 ...

  2. shell脚本操作mysql数据库

    shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改.查)等各种操作 mysql  -hhostname -Pport -uusername -pp ...

  3. lodash接触：string-capitalize

    1.capitalize : _.capitalize([string='']) Capitalizes the first character of string. 参数 [string=''] ( ...

  4. Quartz 基本概念及原理

    最近项目要用quartz,所以记录一下: 概念   Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使 ...

  5. PHP 二维码解码 (读取二维码)

    #zbar wget http://ncu.dl.sourceforge.net/project/zbar/zbar/0.10/zbar-0.10.tar.bz2 yum install gtk2 g ...

  6. VS2010 添加服务引用以后点不出引用服务的命名空间

    声明:本次我遇到的仅是这类情况中的其中一个个例,不要拘泥于些噢! 问题描述: 1.我建了一个新项目,不引用服务前是好的,可以打点点出任何已有有命名空间,但是引用服务以后就是点不出服务的命名空间. 2. ...

  7. Codeforces Round #371 (Div. 2) C. Sonya and Queries

    题目链接 分析:01trie树,很容易就看出来了,也没什么好说的.WA了一发是因为没有看见如果数字位数大于01序列的时候01序列也要补全0.我没有晚上爬起来打,白天发现过的人极多. /******** ...

  8. Spring相关：jdom学习:读取xml文件

    云课堂马士兵的spring2.5课程中提到的 用JDOM读取XML文件需先用org.jdom.input.SAXBuilder对象的build()方法创建Document对象,然后用Document类 ...

  9. guava学习--FluentIterable

    public class FluentIterableTest { public static void main(String[] args) { Man man1 = new Man(" ...

  10. [转] 深入探讨C++中的引用

    引用是C++引入的新语言特性,是C++常用的一个重要内容之一,正确.灵活地使用引用,可以使程序简洁.高效.我在工作中发现,许多人使用它仅仅是想当然,在某些微妙的场合,很容易出错,究其原由,大多因为没有 ...