直接用 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. struts2学习：配置篇之namespace

    把namespace单独拉出来讲一方面是因为它实际上不是一个element,而只是一个attribute,前面已经说了,它是package的一个attribute:另外一方面是因为这个属性是我接触St ...

  2. js 默认选中分页条件项

    <table border="0" cellspacing="0" cellpadding="0" height="100% ...

  3. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  4. css透明度的兼容！！！

    以前总是写透明度的代码,今天弄了个弹出框要求就边框透明,于是有了下边的结论,虽然很多东西不合理了,日后找到更合理在做更新!!! html <div class="new_playerf ...

  5. uva 1001（最短路）

    题意:在一个三维的奶酪里面有n(n<=100)个洞,老鼠A想到达老鼠B的位置,在洞里面可以瞬间移动,在洞外面的移动速度为10秒一个单位,求最短时间 题解:如果两个洞相交,那么d[i][j]=0: ...

  6. APIO2015 酱油记

    Day 0 昨天CTSC才比完,当然是要浪啦! 于是浪了一天...午饭都没吃... 晚饭...貌似也没吃... 晚上的时候觉得这样子浪不太好,还是要认真一下,打开bzoj,弃疗了...还是浪吧... ...

  7. BZOJ4049 [Cerc2014] Mountainous landscape

    首先对于一个给定的图形,要找到是否存在答案非常简单... 只要维护当然图形的凸包,看一下是否有线段在这条直线上方,直接二分即可,单次询问的时间复杂度$O(logn)$ 现在用线段树维护凸包,即对于一个 ...

  8. 爱默生UPS并机系统：进入与退出操作方法

    UPS并机系统的进入与退出: 进入:.合UPS的出线及进线开关:开启第一台UPS,等待整流指示灯常亮.然后Invert On,正常开机,此时UPS进入逆变状态 .合另外一台UPS的出线及进线开关,等待 ...

  9. python3批量删除豆瓣分组下的好友

    python3批量删除豆瓣分组下的好友 """ python3批量删除豆瓣分组下的好友 2016年6月7日 03:43:42 codegay 我两年前一时冲动在豆瓣关注了 ...

  10. DOMContentLoaded和load

    /* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...