使用后台模板是为了把前端显示作为model层的一部分,当数据结构确定了,同一个功能可以套用不同的模板结构生成不同的结构,就像组件一样
数据结构
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var model = {//左侧导航动态数据 navs:[ {'idx':'treeopt','name':'Tree操作','icon':'fa-dashboard'}, {'idx':'plmission','name':'计划任务','icon':'fa-bookmark'}, {'idx':'webvisit','name':'Web访问','icon':'fa-globe'}, {'idx':'backmanage','name':'后台运行模块','icon':'fa-cogs'}, {'idx':'apivisit','name':'Api访问','icon':'fa-coffee'}, {'idx':'serverStatus','name':'服务器状态','icon':'fa-coffee'}, {'idx':'usermanage','name':'用户管理','icon':'fa-coffee'}, {'idx':'clientrelease','name':'客户端发布','icon':'fa-coffee'}, {'idx':'newsStatus','name':'新闻抓取状态','icon':'fa-coffee'}, {'idx':'newsPpl','name':'新闻分词管理','icon':'fa-coffee'}, {'idx':'tips','name':'公告','icon':'fa-coffee'}, {'idx':'report','name':'report操作','icon':'fa-coffee'}, {'idx':'shell_code','name':'shellCode操作','icon':'fa-coffee'}, {'idx':'queue_system','name':'队列系统','icon':'fa-coffee'}, {'idx':'chat_status','name':'聊天状态','icon':'fa-coffee'}, {'idx':'questionnaire','name':'问卷调查','icon':'fa-coffee'}, {'idx':'upload_file','name':'上传文件','icon':'fa-coffee'} ] };
显示模板
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var left_nav_temp = function(){//左侧导航模版 /* <div class="hp oa scrollbar"> <div opt="left_head" class="pf h50 wp pl10 pt10 pb5 f_df f_aic oh left_menu"> <img class="w30 h30 fl" src="imgs/login_head_logo.png"/> <span class="dib ml15 h18 oh fl fs18">润投后台</span> </div> <div class="pt50" style="padding-bottom:100px;"> <ul id="index_page_url"> {{# for(var i=0;i<d.navs.length;i++) { }} <li class="db wp h40 tac cp oh left_bc" idx={{d.navs[i].idx}}> <span class="fa {{d.navs[i].icon}} dib w25 h25 mt13 fl ml10"></span> <span class="fl ml5 mt13">{{d.navs[i].name}}</span> </li> {{# } }} </ul> </div> <div opt="left_foot" class="pf wp b0 left_menu z10"> <div class="lh50 tac cp left_bc oh" style="font-size:36px"> <span class="fa fa-github"></span> </div> <div id="admin_shrink" class="db lh50 tac cp oh"> <span class="fa fa-angle-left"></span> </div> </div> </div> */ }; var admin_head_temp = function(){ /* <div class="lh50 pl10 bc_11 b_s b_w1 b_14 z20 pf wp"> {{d.name}} </div> */ };
事件代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function loadPge(e){ var e = WT.e.fix(e),_e = e.t; e.stop(); while(_e.tagName!='UL'){ if(_e.tagName==='LI'){ var _navStyle = _e.attr('idx'); if(clicked){ clicked.ac('left_bc').dc('left_sel'); } _e.dc('left_bc').ac('left_sel'); switch(_navStyle){ //不同页面加载 case _navStyle : viewLoad('zc_admin/' + _navStyle + '.html',$('index_right_con')); for(var i=0; i<model.navs.length; i++){ if (_navStyle === model.navs[i].idx) { $('index_head').h(laytpl(admin_head_temp.help()).render({name:model.navs[i].name})); } } break; default: $('index_right_con').h('NO FOUND'); break; } clicked = _e; } _e = _e.pn(); } }