nunjucks.js模板渲染
Posted CuriousZero
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nunjucks.js模板渲染相关的知识,希望对你有一定的参考价值。
直接用 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模板渲染的主要内容,如果未能解决你的问题,请参考以下文章
thymeleaf 片段渲染后重新加载 javascript