您的位置：首页 > Web前端 > JavaScript

nunjucks.js模板渲染

2016-11-18 00:03 127 查看
直接用
script
引入文件：

<scriptsrc="nunjucks.js"></script>


是使用
render
来直接渲染文件，这种方式支持继承(extends)和包含(include)模板。使用之前需要配置文件的路径：

nunjucks.configure('views',{autoescape:true});
nunjucks.render('index.html',{foo:'bar'});


在node端，
'views'
为相对于当前工作目录(workingdirectory)的路径。在浏览器端则为一个相对的url，最好指定为绝对路径(如
'/views'
)。

项目的目录结构如下：



其中：

主页index.html

<!DOCTYPEhtml>
<html>

<head>
<title>nunjucks应用</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>


模板tem_data.html：

<divclass="main">
<tableclass="data-show">
<thclass="thead">
<tdclass="name">名字</td>
<tdclass="area_id">地区编号</td>
<tdclass="area_name">地区名称</td>
<tdclass="river_name">河流名称</td>
</th>
{%foritemindata%}
<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:"日溪乡汶石",
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});

varhtml=nunjucks.render('tem_data.html',{data:data});

//document.getElementsByClassName("contain").innerHTML=html;//nocan

$(".contain").append(html);//yes
//console.log(html);


为了能够成功渲染，需要修改端口：

（通过输入命令：npminstall-ghttp-server）




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航