直接用 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. Sealed密封类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; #region 概述 //在 ...

  2. News common vocabulary

    英语新闻常用词汇与短语 经济篇 accumulated deficit 累计赤字 active trade balance 贸易顺差 adverse trade balance 贸易逆差 aid 援助 ...

  3. NGUI Camera's raycast hit through the UI Layer issue

    Raycast into GUI?http://forum.unity3d.com/threads/raycast-into-gui.263397/ << ; Ray myray = UI ...

  4. 004_kafka_安装运行

    1.下载和安装 目前kafka的稳定版本为0.10.0.0 下载地址:http://kafka.apache.org/downloads.html 下载后解压缩安装包到系统即可完成安装 > ta ...

  5. LR参数化后取值规则小记

    对参数化的取值,只有一个用户的情况能分清,但是多用户多迭代就搞不懂,特意使用Parameter List中自带的参数化模拟器Simulate Parameter进行简单的实验,3条数据 + 4个用户 ...

  6. react native ScrollView

    ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). ...

  7. C#深度拷贝和浅度拷贝方法

    C#浅度拷贝多用于值类型的复制,即 int a=1;int b=a; 设置b=2后不会影响a的值. 但如果对于引用类型class a=new class(); class b=a; 设置b.name= ...

  8. WaitForSingleObject 和 WaitForMultipleObjects函数

    1.WaitForSingleObject 等待函数可使线程自愿进入等待状态,直到一个特定的内核对象变为已通知状态为止.这些等待函数中最常用的是WaitForSingleObject:   DWORD ...

  9. android使用html+javascript来制作页面

    一般的android界面使用的是XML.但是XML如果要制作很高级的UI,会很复杂.如果使用HTML老进行UI设计就会简单很多. android早就提供了这样的借口. WebView.addJavas ...

  10. linux命令每日一练习-rmdir　mv

    rmdir 删除一个空的文件夹,当目标文件夹非空的时候不能删除 mv 移动文件或目录 mv source target mv -i *** *** 如果目标文件存在则询问是否覆盖 mv -f *** ...