后台模板

使用后台模板是为了把前端显示作为model层的一部分，当数据结构确定了，同一个功能可以套用不同的模板结构生成不同的结构，就像组件一样

数据结构

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'}
            ]
        };

显示模板

    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>
        */
    };

事件代码

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();
        }
    }