直接用 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. build.xml配置编译打包过程（转）

    工程目录如下,使用eclipse中的ant对此工程进行编译打包: MonServer | --------src |            |--------com |            |--- ...

  2. shader函数

    Intrinsic Functions (DirectX HLSL) The following table lists the intrinsic functions available in HL ...

  3. 在eclipse中导入weka（小白在路上）

    第一步:新建一个java工程,new->javaproject,假设工程名为wekatest 第二步:导入weka.jar 第三步:src关联 导入后有许多的.class文件,直接双击打开是看不 ...

  4. WPF:带复选框CheckBox的树TreeView

    最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...

  5. org.springframework.web.context.ContextLoaderListener(转载)

    ContextLoaderListener的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在web ...

  6. hibernate FetchType理解

    JPA定义实体之间的关系有如下几种: @OneToOne @ManyToOne @OneToMany @ManyToMany 在定义它们的时候可以通过fetch属性指定加载方式,有两个值: Fetch ...

  7. win7 下设置时间格式为yyyy-MM-dd 格式无效的解决方法

    部分win7 64位机器,在时间区域部分设置了时间格式为:yyyy-MM-dd后程序和数据库里面还是原来默认的yyyy/MM/dd格式 打开注册表,搜索 yyyy/MM/dd ,修改为yyyy-MM- ...

  8. bzoj 1005 1211 prufer序列总结

    两道题目大意都是根据每个点的度数来构建一棵无根树来确定有多少种构建方法 这里构建无根树要用到的是prufer序列的知识 先很无耻地抄袭了一段百度百科中的prufer序列的知识: 将树转化成Prufer ...

  9. Hadoop 2.2.0学习笔记20131210

    伪分布式单节点安装执行pi失败: [root@server- ~]# ./bin/hadoop jar share/hadoop/mapreduce/hadoop-mapreduce-examples ...

  10. Swift语言—常量、变量、类型赋值

    常量:常量在作用域内不能被赋值且不会发生改变,只读不写,每个常量都必须有唯一的名字和内存空间:关键字:let   变量:变量在作用区域内可以它的值可以被改变,可读可写可覆盖,每个常量都必须有唯一的名字 ...