Directly with the script
Introduction file:
<script src= "Nunjucks.js" ></script>
is used render
to render files directly, which supports inheritance (extends) and include templates. Use the path before you need to configure the file:
true }); Nunjucks.render (' index.html ', {foo: ' Bar '});
On the node side, the ‘views‘
path relative to the current working directory (working directory). On the browser side is a relative URL, preferably specified as an absolute path (for example ‘/views‘
).
The directory structure of the project is as follows:
which
Home index.html
<!DOCTYPE HTML><HTML><Head> <title>Nunjucks applications</title> <Metahttp-equiv= "Access-control-allow-origin"content="*"></Head><Body><Divclass= "contain">123</Div><Scripttype= "Text/javascript"src= "Js/jquery-2.1.4.min.js"></Script><Scripttype= "Text/javascript"src= "Js/nunjucks.js"></Script><Scripttype= "Text/javascript"src= "Js/app.js"></Script></Body></HTML>
Template tem_data.html:
<Divclass= "Main"> <Tableclass= "Data-show"> <thclass= "Thead"> <TDclass= "Name">Name</TD> <TDclass= "area_id">Area number</TD> <TDclass= "Area_name">Region name</TD> <TDclass= "River_name">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:
varData=[{extra: {},time:"2016-09-29t08:00:00", Val:195, Level_index:5, ID:"71552116", Name:"Ri Xi Xiang Wen shi", LNG:119.1921, Lat:26.3158, type:"PP", Type_name:"Rainfall Station", subjection:Flood control, area_id:"350111", Area_name:"Jinan District", River_name:Minjiang, Water_system:Minjiang, Station_position:0, City_code:"350100", City_name:"Fuzhou"},{extra: {},time:"2016-09-29t16:00:00", Val:192, Level_index:5, ID:"71502056", Name:"Shou Shan Xiang Hong Liao", LNG:119.237221, Lat:26.220278, type:"ZZ", Type_name:"River water Level station", subjection:Flood control, area_id:"350111", Area_name:"Jinan District", River_name:"Shou Shan Xiang Hong Liao", Water_system:"Shou Shan Xiang Hong Liao", Station_position:0, City_code:"350100", City_name:"Fuzhou"}]; Nunjucks.configure (' Http://127.0.0.1:8080/template ', {autoescape:true});varhtml = Nunjucks.render (' tem_data.html ', {data:data});//document.getelementsbyclassname ("contain"). innerhtml=html; Nocan $(". Contain"). Append (HTML);//Yes//Console.log (HTML);
In order to render successfully, the port needs to be modified:
Nunjucks.js Template Rendering