直接用 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. javascript事件之：谈谈自定义事件

    对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一个appear事件.当页面图片开始出现时候,触发这个自定义的appear事件(注意,这里只 ...

  2. h.Connector的SSL属性实现

    前面分析了Connector的配置,第一步,Digester已经将上述的属性设置到Connector和xxxEndpoint中了. 下面对于一些核心属性,看看Tomcat是如何使用的: 1.SSLEn ...

  3. Linux 系统启动过程

    linux启动时我们会看到许多启动信息. Linux系统的启动过程并不是大家想象中的那么复杂,其过程可以分为5个阶段: 内核的引导. 运行init. 系统初始化. 建立终端 . 用户登录系统. 内核引 ...

  4. 华为WLAN产品介绍-05

    无线AP与AC的区别 WLAN系统一般由AC(接入控制器)和AP(无线接入点)组成. 无线AP,为Access Point简称,一般翻译为“无线访问节点”,它是用于无线网络的无线交换机,也是无线网络的 ...

  5. python--分布式爬虫

    //server import socket, select, re, queue, redis from multiprocessing import Pool, cpu_count from py ...

  6. android 中 webview 怎么用 localStorage?

    我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀? 网上搜了好多都没效果 1 2 3 4 5 6 7 8 9 mainWebView = (WebVie ...

  7. python学习------dictionary和set

    一.dictionary 1.字典的形式:a={‘key’:value,‘key1’:value,................} 2.字典的的key不能重复,是一个不可变对象 3.字典的的查找和添 ...

  8. Struts2 报 Result 错误

    写的时候犯了个低级错误  struts.xml中 配置result 的时候 没有配置type

  9. eclipse 本地项目提交到远程库以及从远程库中添加项目 ---git

    本地项目提交到远程库 1.右击项目->team->share project 2.选择本地库 从远处库中的项目拉到本地 1.右击项目->import项目

  10. /etc/passwd和/etc/shadow

    这两个路径分别是用于存储密码和隐形密码 让我们先来观察它,在了解它 [root@oc3408554812 ~]# cat /etc/passwd |grep carltoncarlton    :   ...