写几个简单用artTemplate的例子

写几个简单的artTemplate的例子，很多框架都有自己的模板（template），没得时候，可以利用artTemplate.js完成

html文件是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="commonBus">
    <div id="baseBus"></div>

    <div id="packBus"></div>
    <script id="pack" type="text/html">
        {{each list as value i}}
            <span>{{value}}</span>
        {{/each}}
    </script>

    <!-- 简单语法 -->
    <DIV id="changebUS"></DIV>
    <script id="change" type="text/html">
        {{each list}}
            <span>{{$index+1}}:{{$value}}</span>
        {{/each}}
    </script>

<!-- 原生语法略 -->
</div>
<script type="text/javascript" src="src/lib/require.js"></script>
<script type="text/javascript" src="src/ajaxGetHtmlAppendDiv.js"></script>
</body>
</html>

js文件是：

require.config( {
    baseUrl: "./src",
    paths: {
        //公共路径开始
        ui: "../src/ui",
        util: "../src/util",
        modules: "../src/modules",
        common: "../src/common",
        service:"../src/service",
        bower_components:"../bower_components",
        //公共路径结束
        //公共JS开始
        bootstrap:"../src/lib/bootstrap.min",
        dateutil:"../src/lib/dateutil",//公用日期工具
        route:"../src/lib/director",//公用路由。。去掉以前内个自己写的路由
        jquery:"../src/lib/jquery.min",//jquery
        es5shim:"../src/lib/es5-shim.min",//兼容IE8的一些ECMASCRIPT5的一些方法
        bs_pagination:"../src/lib/jquery.bs_pagination",
        template:"../src/lib/template",
        dialog:"../src/lib/dialog-plus",
        icheck: "../src/lib/icheck",
        encoder: "../src/lib/encoder",
        shiroTrie: "../src/lib/shiro-trie"
    },
    shim: {
        bootstrap: {
            deps: ["jquery"]
        },
        bs_pagination: {
            deps: ["jquery"]
        },
        dialog: {
            deps: ["jquery"]
        },
        icheck: {
            deps: ["jquery"]
        }
    },
    waitSeconds: 15//加载时间为15秒。。。。15秒还加载不到。。可以放弃了
});
//配置路由
require(["jquery","route","dialog","util/storage","template","util/permissionValidator","bootstrap","es5shim"],function($,Route,dialog,storage,template,permissionValidator){
    var container = $("#commonBus");

    // $.ajax({
    //         url:"src/modules/error/forbidden403.html",//"src/modules/" + filePath + "/index.html",//"src/modules/error/forbidden403.html"
    //         contentType:"text/html",
    //         success:function(template){
    //             console.info(template);
    //             // container.append(template);//，支持html类型，不会转译，当做标签来解析，text就当做文本
    //         }
    // });

    var baseBus = $("#baseBus");
    var data ={
        respInfo : [{class:‘one‘,iconUrl:‘myunicode‘,appName:‘我的一码通‘},
                    {class:‘two‘,iconUrl:‘change‘,appName:‘证券持有变更‘},
                    {class:‘three‘,iconUrl:‘left‘,appName:‘证券持有余额‘},
                    {class:‘fourth‘,iconUrl:‘frozeen‘,appName:‘证券冻结查询‘},
                    {class:‘five‘,iconUrl:‘tax‘,appName:‘股息红利个人所得税‘}]
    }
              var wxapp = ‘{{each respInfo as value i}}‘+
                    ‘<li class=‘+‘{{value.class}}‘+‘>‘ +
                        ‘<a href="javascript:void(0)">‘ +
                        ‘<div class="legend {{value.iconUrl}}" >‘+
                        ‘</div>‘+
                        ‘<div class="title">‘+
                            ‘<h5>{{value.appName}}</h5>‘+
                        ‘</div>‘+
                        ‘</a>‘+
                    ‘</li>‘+
              ‘{{/each}}‘;
             // var renderwxapp = template.compile(wxapp);
             // var html = renderwxapp(data);
             // var html=template.compile(wxapp)(data);//template.compile(wxapp)(data)返回值是函数,编译这段拼接的代码
             var html=template.render(wxapp)(data);//template.render(wxapp)(data)返回值是函数,编译这段拼接的代码
             baseBus.html( "" );
             baseBus.html(html);

             var packdata ={
                 list:[‘one‘,‘two‘,‘three‘,‘fourth‘]
             }
             var packhtml = template(‘pack‘,packdata);//template("id名字",data填充数据)，用于模板
             $("#packBus").html(packhtml);

              var changedata ={
                 list:[‘one11‘,‘two11‘,‘three11‘,‘fourth11‘]
             }
             var changehtml = template(‘change‘,changedata);
             $("#changebUS").html(changehtml);

var routePathMap = {
        ‘#/index‘: {‘path‘:‘investor/member/memberIndex‘,‘permissions‘:[‘portal:common‘]},
        ‘#/card‘ : {‘path‘:‘portal/findPwd/cardMsgTip‘,‘slashParam‘:true,‘queryParam‘:true,},
        ‘#/resetPwd‘ : {‘path‘:‘memberc/accountmember/accountEditPwd‘,‘permissions‘:[‘portal:common‘]},
        ‘#/member‘ : {‘path‘:‘investor/member/memberIndex‘,‘permissions‘:[‘portal:common‘]},
        ‘#/register‘:{‘path‘:‘portal/register/regist‘},//新版注册页面 PAN-Z-G
        ‘#/serviceProcess‘:{‘path‘:‘portal/register/protocal‘},//新版注册须知 PAN-Z-G
        ‘#/serviceAgreements‘:{‘path‘:‘portal/register/ol_reginfo‘},//新版网络服务协议 PAN-Z-G

        /**
         * 设置密保问题首页 PAN-Z-G
         */
        ‘#/secuIssues‘:{‘path‘:‘memberc/accountmember/setIssues‘
            ,‘permissions‘:[‘portal:common‘]},
        /**
         * 设置密保问题成功页 PAN-Z-G
         */
        ‘#/secuIssuesSucc‘:{‘path‘:‘memberc/accountmember/securityIssuesSucc‘
            ,‘permissions‘:[‘portal:common‘]},

        /**
         * 激活基金账户 PAN-Z-G
         */
        ‘#/fundAuth‘:{‘path‘:‘portal/fundAuth/fundAuth‘
            ,‘permissions‘:[‘portal:common‘]},
        /**
         * 新版小白注册成功页面 PAN-Z-G
         */
        ‘#/registerSucc‘:{‘path‘:‘/register/registSuccess‘},

        /**
         * 新版绑定一码通页面 PAN-Z-G
         */
        ‘#/bindUniq‘:{‘path‘:‘memberc/accountmember/account‘
            ,‘permissions‘:[‘portal:bind:uniq‘]},
        /**
         * 新版交易报盘_激活页面 PAN-Z-G
         */
        ‘#/tradeAuth‘:{‘path‘:‘memberc/accountmember/accountDealActive‘
            ,‘permissions‘:[‘portal:bind:trade‘]},
        /**
         * 新版交易报盘_验证完成页面 PAN-Z-G
         */
        ‘#/tradeAuth_succ‘:{‘path‘:‘memberc/accountmember/accountDealOver‘
            ,‘permissions‘:[‘portal:bind:trade‘]},
        /**
         * 新版手机号_验证页面 PAN-Z-G
         */
        ‘#/mobileAuth‘:{‘path‘:‘memberc/accountmember/accountEcodeActive‘
            ,‘permissions‘:[‘portal:bind:mobile‘]},
        /**
         * 新版手机号_验证完成页面 PAN-Z-G
         */
        ‘#/mobileAuth_succ‘:{‘path‘:‘memberc/accountmember/accountEcodeOver‘
            ,‘permissions‘:[‘portal:bind:mobile‘]},
        /**
         * 新版认证_验证页面 PAN-Z-G
         */
        ‘#/counterAuth‘:{‘path‘:‘memberc/accountmember/accountCardActive‘
            ,‘permissions‘:[‘portal:bind:counter‘]},
        /**
         * 新版认证_完成页面 PAN-Z-G
         */
        ‘#/counterAuth_succ‘:{‘path‘:‘memberc/accountmember/accountCardOver‘
            ,‘permissions‘:[‘portal:bind:counter‘]},

        ‘#/p_fundAuth‘:{‘path‘:‘memberc/accountmember/fundAuth‘
            ,‘permissions‘:[‘portal:common‘]},
        ‘#/findPwd‘:{‘path‘:‘portal/findPwd/findPassword‘},        //忘记密码  lk
        ‘#/f_info‘:{‘path‘:‘portal/findPwd/bindFind‘},            //绑定一码通 lk
        ‘#/f_authBindFind‘:{‘path‘:‘portal/findPwd/authBindFind‘},
        ‘#/f_addMobile‘:{‘path‘:‘portal/findPwd/unBindFind‘},                                    //未绑定一码通  lk
        ‘#/f_verifyMobile‘:{‘path‘:‘portal/findPwd/editCode‘},    //获取手机验证码  lk
        ‘#/f_resetPwd‘:{‘path‘:‘portal/findPwd/setNewPhone‘},    //重设密码  lk
        ‘#/f_otherWay‘:{‘path‘:‘portal/findPwd/otherWay‘},      //其他方式页面
        ‘#/f_pwdProtection‘:{‘path‘:‘portal/findPwd/issuesPwd‘},  //密保问题页面
        ‘#/f_securitySetPwd‘:{‘path‘:‘portal/findPwd/securitySetPwd‘}, //密保问题设置密码页面
        ‘#/f_tradeAuth‘:{‘path‘:‘portal/findPwd/dealSetPwd‘},   //交易报盘_验证页  lk
        ‘#/f_tradeAuth_succ‘:{‘path‘:‘portal/findPwd/dealMsgTip‘},//交易报盘_完成页  lk
        ‘#/f_counterAuth‘:{‘path‘:‘portal/findPwd/cardSetPwd‘},//身份验证机构  lk
        ‘#/f_counterAuth_succ‘:{‘path‘:‘portal/findPwd/cardMsgTip‘},//身份验证机构_完成页 lk
        ‘#/f_veriFundInfo‘:{‘path‘:‘portal/findPwd/bindFundFind‘},
        ‘#/f_fundAuth‘:{‘path‘:‘portal/findPwd/fundShareCert‘},
        ‘#/f_findPwdSucc‘:{‘path‘:‘portal/findPwd/findPwdSucc‘},
        ‘#/registerSucc‘:{‘path‘:‘portal/register/registSuccess‘},
        ‘#/bindNewMobile‘ : {‘path‘:‘memberc/accountmember/memberBindPhone‘, ‘permissions‘:[‘portal:common‘]},//通过手机号换绑新手机 yhb
        ‘#/p_tradeAuth‘ : {‘path‘:‘memberc/accountmember/dealBindPhone‘, ‘permissions‘:[‘portal:trade‘]},//通过交易报盘修改手机 yhb
        ‘#/p_tradeAuth_succ‘ : {‘path‘:‘memberc/accountmember/dealBindOver‘, ‘permissions‘:[‘portal:trade‘]},//交易报盘修改手机成功页 yhb
        ‘#/p_counterAuth‘ : {‘path‘:‘memberc/accountmember/cardBindPhone‘, ‘permissions‘:[‘portal:counter‘]},//通过身份机构认证修改手机 yhb
        ‘#/p_counterAuth_succ‘ : {‘path‘:‘memberc/accountmember/cardBindOver‘, ‘permissions‘:[‘portal:counter‘]},//身份认证机构修改手机成功页 yhb
        ‘#/personalCenter‘: {‘path‘:‘memberc/accountmember/memberCenter‘,‘tabFlag‘:true, ‘permissions‘:[‘portal:common‘]},
        ‘#/o_resetPwd‘: {‘path‘:‘portal/userLogin/changePwd‘, ‘permissions‘:[‘portal:mig:pwd‘]},//老用户弱密重设  yhb
        ‘#/o_addMobile‘: {‘path‘:‘portal/userLogin/setPhone‘, ‘permissions‘:[‘portal:mig:mobile‘]},//老用户重设手机  yhb
        ‘#/o_migComplete‘: {‘path‘:‘portal/userLogin/setSuccess‘, ‘permissions‘:[‘portal:common‘]},//老用户迁移成功  yhb
        ‘#/p_chgPhoneSucc‘ : {‘path‘:‘memberc/accountmember/chgPhoneSucc‘, ‘permissions‘:[‘portal:common‘]}
    };

    function createRouteDic(routePathMap, routeHandler){
        var routeDic = {},
            url = null;
        for(key in routePathMap){
            url = key.substr(1);
            if(routePathMap[key].slashParam && !routePathMap[key].queryParam){
                url = key.substr(1) + ‘/([0-9]*)‘;
            }
            if(routePathMap[key].slashParam && routePathMap[key].queryParam){
                url = key.substr(1) + ‘/((\w|.)*)‘;
            }
            if(routePathMap[key].tabFlag && !routePathMap[key].slashParam && !routePathMap[key].queryParam){
                url += ‘\\|?((\w|.)*)‘;
            }
            routeDic[url] = routeHandler;
        }
        return routeDic;//对象 键：方法
    }

    createRouteDic(routePathMap);

    function routeHandler(param){

        //获取当前路由条目
        var urlInfo = getUrlInfoFromRoutePathMap(param);
        var fixedUrlPart = urlInfo.url,
            filePath = urlInfo.path;
            urlPermissions = urlInfo.permissions || [];
        var head = filePath.split(‘/‘)[0],
            business = filePath.split(‘/‘)[1];
        //获取用户角色
        currentUserRoles = userInfo.fullRoles || [];
        currentUserPermissions = userInfo.permissions || [];

        //老用户强制跳转  MIG_USER存在  #/o_不存在
        if(currentUserRoles.indexOf(‘MIG_USER‘) > -1 && fixedUrlPart.indexOf(‘#/o_‘) < 0){
            window.location.href = _http_error_statues.web_service_url+_http_error_statues.web_service_name+"userMigCenter/invUserRedirect";
            return;
        }

        //加载头部及菜单栏
        navMenus.initMenus(container, userInfo,urlInfo);

        //加载导航下部的页面
        $.ajax({
            url:"src/modules/" + filePath + "/index.html",
            contentType:"text/html",
            success:function(template){
                if(navMenus.hasRightContainer()){
                    var rightContainer = $(‘#rightContainer‘);
                    rightContainer.html(template);
                }else{
                    container.html(template);
                }
                //加载业务js文件
                require(["modules/" + filePath + "/index"],function(index){
                    index(container, param, userInfo);
                });
            },
            error: function redirectToNotFoundPage(){
                $.ajax({
                    url:"src/modules/error/error404.html",
                    contentType:"text/html",
                    success: function(template){
                        container.html(template);
                    }
                })
            }
        });

    };
//     {
//     "#/index": "/index",
//     "#/card": "/card/((w|.)*)",
//     "#/resetPwd": "/resetPwd",         "memberc/accountmember/accountEditPwd"
//     "#/member": "/member",
//     "#/register": "/register",
//     "#/serviceProcess": "/serviceProcess",
//     "#/serviceAgreements": "/serviceAgreements",
//     "#/secuIssues": "/secuIssues",
//     "#/secuIssuesSucc": "/secuIssuesSucc",
//     "#/fundAuth": "/fundAuth",
//     "#/registerSucc": "/registerSucc",
//     "#/bindUniq": "/bindUniq",
//     "#/tradeAuth": "/tradeAuth",
//     "#/tradeAuth_succ": "/tradeAuth_succ",
//     "#/mobileAuth": "/mobileAuth",
//     "#/mobileAuth_succ": "/mobileAuth_succ",
//     "#/counterAuth": "/counterAuth",
//     "#/counterAuth_succ": "/counterAuth_succ",
//     "#/p_fundAuth": "/p_fundAuth",
//     "#/findPwd": "/findPwd",
//     "#/f_info": "/f_info",
//     "#/f_authBindFind": "/f_authBindFind",
//     "#/f_addMobile": "/f_addMobile",
//     "#/f_verifyMobile": "/f_verifyMobile",
//     "#/f_resetPwd": "/f_resetPwd",
//     "#/f_otherWay": "/f_otherWay",
//     "#/f_pwdProtection": "/f_pwdProtection",
//     "#/f_securitySetPwd": "/f_securitySetPwd",
//     "#/f_tradeAuth": "/f_tradeAuth",
//     "#/f_tradeAuth_succ": "/f_tradeAuth_succ",
//     "#/f_counterAuth": "/f_counterAuth",
//     "#/f_counterAuth_succ": "/f_counterAuth_succ",
//     "#/f_veriFundInfo": "/f_veriFundInfo",
//     "#/f_fundAuth": "/f_fundAuth",
//     "#/f_findPwdSucc": "/f_findPwdSucc",
//     "#/bindNewMobile": "/bindNewMobile",
//     "#/p_tradeAuth": "/p_tradeAuth",
//     "#/p_tradeAuth_succ": "/p_tradeAuth_succ",
//     "#/p_counterAuth": "/p_counterAuth",
//     "#/p_counterAuth_succ": "/p_counterAuth_succ",
//     "#/personalCenter": "/personalCenter\\|?((w|.)*)",
//     "#/o_resetPwd": "/o_resetPwd",
//     "#/o_addMobile": "/o_addMobile",
//     "#/o_migComplete": "/o_migComplete",
//     "#/p_chgPhoneSucc": "/p_chgPhoneSucc"
// }
        //createRouteDic()
        //返回
        // var routeDic ={    "/o_migComplete":function(param){},
        //              {    "/p_chgPhoneSucc":function(param){}}
});

几个小例子；

原文地址：https://www.cnblogs.com/wulinzi/p/8317933.html

时间： 2024-10-09 02:58:31

写几个简单用artTemplate的例子的相关文章

上海岳城科技一个简单的Ajax请求例子

Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术.通过Ajax,您可以使用 JavaScript的XMLHttpRequest对象来直接与服务器进行通信.您可以在不重载页面的情况与 Web 服务器交换数据.在本文的例子中,我们将演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

[转]一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程

一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程 希望此文能给初学多线程编程的朋友带来帮助,也希望牛人多多指出错误. 另外感谢以下链接的作者给予,给我的学习带来了很大帮助 http://blog.csdn.net/locape/article/details/6040383 http://www.cnblogs.com/liuweijian/archive/2009/12/30/1635888.html 一.什么是多线程? 当我自己提出这个问题的时候,我还是很老实的拿着操作系

使用OpenCV滑动条写成的简单调色器，实时输出RGB值

好久没有写博客了,最近在看OpenCV,于是动手写了个简单的RGB调色器,在终端实时输出RGB的值.通过这个程序学习滑动条的使用.程序中主要用到cvCreateTrackbar ,其用法如下: cvCreateTrackbar 创建trackbar并将它添加到指定的窗口. CV_EXTERN_C_FUNCPTR( void (*CvTrackbarCallback)(int pos) ); int cvCreateTrackbar( const char* trackbar_name, cons

一个简单的回调（例子）

1.声明一个回调Interface: public interface CallBack { /** * 执行回调方法 * @param objects 将处理后的结果作为参数返回给回调方法 */ public void execute(Object... objects ); } 2.回调的地方继承回调,实现回调的方法: import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe

ThinkPHP 学习（2）---一个简单的起步的例子

文件夹目录是核心目录ThinkPHP,入口文件是index.php,ThinkPHP里面的文件含义下次详解,接下来是启动一个自己的程序,现在可以修改一下入口文件,一般情况下会将自己的文件放在一个文件夹,我现在是先建立自己的文件夹,一个前台Home文件夹,一个后台文件夹Admin,怎么建立一个结构拥有ThinkPHP功能的文件夹呢?打开index.php,加入如下代码, <?php    //1.确定应用名称Home    define('APP_NAME','Admin');    //2.确定

虚幻4，BP写了一个简单的三线跑酷工程

BP写了一个简单的三线跑酷 链接: http://pan.baidu.com/s/1jILE4V8 密码: 96ua

一个简单的Spring定时器例子 注解方式

首先在applicationContext.xml中增加 文件头中增加一条 xmlns:task="http://www.springframework.org/schema/task"xsi:schemaLocation 中增加一条 http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task.xsd <beans xmlns:task=&quo

一个简单的iBatis入门例子

一个简单的iBatis入门例子,用ORACLE和Java测试 目录结构: 1.导入iBatis和oracle驱动. 2.创建类Person.java package com.ibeats;import java.util.Date; public class Person { private int id; private String firstName; private String lastName; private double weightInKilograms; private do

java写的一个简单学生管理系统[改进]

用Java写的一个简单学生管理系统 import java.util.*; public class student_cj {  public static void main(String[] args){      Scanner in=new Scanner(System.in);   System.out.print("请输入学生人数:");   int num=in.nextInt();//学生人数   String[] str=new String[num];//结合一行数