自定义事件如何传递参数到template当前加载的窗口

问题：无法设置或获取到template打开的href界面id，只能获取到template的id （base_default）；
问题描述：
1.点击base_setting.html页面a连接template加载href链接，account_setting.html

2. 显示template加载页面，点击添加按钮createview()，account_add.html 显示添加界面
3. 点击保存按钮fire传递添加数据到当前template加载的href界面，写入数据，刷新列表
   base_setting.html
   
   
   
   account_setting.html
   
   
   
   account_add.html
   
   

1.base_setting.html
<div class="mui-content" id="list" >

        <div class="title">  
            账户相关  
        </div>  
            <ul class="mui-table-view">  
             <li class="mui-table-view-cell">  
                <a  id="account_setting.html" open-id="account_add" class="mui-navigate-right" href="../../examples/accounts/account_setting.html" open-url="accounts/account_add.html">  
                <div class="mui-table">  
                        <div class="mui-table-cell mui-col-xs-10">  
                            <h4 class="mui-ellipsis"><i class="mui-icon iconfont icon-zhanghu"></i>账户设置</h4>  
                            <p class="mui-h6 mui-ellipsis">设置现金、银行卡、虚拟账户等与钱相关的账号</p>  
                        </div>  
                </div>  
                </a>  
             </li>  
            </ul>  

            <div class="title">  
            收支相关  
        </div>  
            <ul class="mui-table-view">  
             <li class="mui-table-view-cell">  
                <a id="outlay_setting.html" open-id="outlay_add" class="mui-navigate-right"  href="../../examples/outlay/outlay_setting.html" open-url="outlay/outlay_add.html">  
                <div class="mui-table">  
                        <div class="mui-table-cell mui-col-xs-10">  
                            <h4 class="mui-ellipsis"><i class="mui-icon iconfont icon-zhichu"></i>支出类别设置</h4>  
                            <p class="mui-h6 mui-ellipsis">根据自身需求设置合适的消费分类，系统内置相关分类</p>  
                        </div>  
                </div>  
                </a>  
             </li>  

              <li class="mui-table-view-cell">  
                <a id="income_setting.html" open-id="income_add" class="mui-navigate-right"  href="../../examples/income/income_setting.html" open-url="income/income_add.html">  
                <div class="mui-table">  
                        <div class="mui-table-cell mui-col-xs-10">  
                            <h4 class="mui-ellipsis"><i class="mui-icon iconfont icon-shouru"></i>收入类别设置</h4>  
                            <p class="mui-h6 mui-ellipsis">根据自身需求设置合适的收入分类，系统内置相关分类</p>  
                        </div>  
                </div>  
                </a>  
             </li>  

              <li class="mui-table-view-cell">  
                <a id="agency_setting.html" open-id="agency_add" class="mui-navigate-right" href="../../examples/agency_staff/agency_staff_setting.html" open-url="agency_staff/agency_add.html">  
                <div class="mui-table">  
                        <div class="mui-table-cell mui-col-xs-10">  
                            <h4 class="mui-ellipsis"><i class="mui-icon iconfont icon-gongzuorenyuan"></i>人员机构设置</h4>  
                            <p class="mui-h6 mui-ellipsis">与我发生金钱关系的人员或好友等</p>  
                        </div>  
                </div>  
                </a>  
             </li>  
            </ul>  

            <div class="title">  
            系统相关  
        </div>  
            <ul class="mui-table-view">  
             <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="../../examples/system/backup_recovery.html" >  
                <div class="mui-table">  
                        <div class="mui-table-cell mui-col-xs-10">  
                            <h4 class="mui-ellipsis"><i class="mui-icon iconfont icon-8beifenhuifu"></i>数据备份与恢复</h4>  
                            <p class="mui-h6 mui-ellipsis">防止刷机或其他意外情况，有空时请备份一下</p>  
                        </div>  
                </div>  
                </a>  
             </li>  
              <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="../../examples/system/cleardata.html">  
                <div class="mui-table">  
                        <div class="mui-table-cell mui-col-xs-10">  
                            <h4 class="mui-ellipsis"><i class="mui-icon iconfont icon-qingkongshujukulianjie"></i>清除数据</h4>  
                            <p class="mui-h6 mui-ellipsis">清除所有数据，重新来过O(∩_∩)O哈哈~</p>  
                        </div>  
                </div>  
                </a>  
             </li>  
            </ul>  

    </div>  

<script>
var aniShow = "pop-in";
mui.init({
swipeBack:true //启用右滑关闭功能
});

        var templates = {};  
        var getTemplate = function(name, header, content) {  
            var template = templates[name];  
            if (!template) {  
                //预加载共用父模板；  
                var headerWebview = mui.preload({  
                    url: header,  
                    id: name + "-main",  
                    styles: {  
                        popGesture: "hide",  
                    },  
                    extras: {  
                        mType: 'main'  
                    }  
                });  
                //预加载共用子webview  
                var subWebview = mui.preload({  
                    url: !content ? "" : content,  
                    id: name + "-sub",  
                    styles: {  
                        top: '45px',  
                        bottom: '0px',  
                    },  
                    extras: {  
                        mType: 'sub'  
                    }  
                });  
                subWebview.addEventListener('loaded', function() {  
                    setTimeout(function() {  
                        subWebview.show();  
                    }, 50);  
                });  
                subWebview.hide();  
                headerWebview.append(subWebview);  
                //iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；  
                if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？  
                    headerWebview.addEventListener('hide', function() {  
                        subWebview.hide("none");  
                    });  
                }  
                templates[name] = template = {  
                    name: name,  
                    header: headerWebview,  
                    content: subWebview,  
                };  
            }  
            return template;  
        };  
        var initTemplates = function() {  
            getTemplate('base_default', '../../examples/template.html');  
        };  

        mui.plusReady(function() {  
        //延迟的原因：优先打开启动导航页面，避免资源争夺  
                setTimeout(function () {  
                    //初始化模板  
                    initTemplates();   
                },200);  
        });  
        //主列表点击事件  
        mui('#list').on('tap', 'a', function() {  
            var id = this.getAttribute('id');  
            var openid=this.getAttribute('open-id');  
            var openUrl=this.getAttribute('open-url');  
            var href = this.href;  
            var type = this.getAttribute("open-type");  
            //不使用父子模板方案的页面  
            if (type == "common") {  
                var webview_style = {  
                    popGesture: "close"  
                };  
                //侧滑菜单需动态控制一下zindex值；  
                if (~id.indexOf('')) {  
                    webview_style.zindex = 9998;  
                    webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";  
                }  
                //图标界面需要启动硬件加速  
                if(~id.indexOf('icons.html')){  
                    webview_style.hardwareAccelerated = true;  
                }  

                mui.openWindow({  
                    id: id,  
                    url: this.href,  
                    styles: webview_style,  
                    show: {  
                        aniShow: aniShow  
                    },  
                    waiting: {  
                        autoShow: false  
                    }  
                });  
            } else if (id && ~id.indexOf('.html')) {  

                if (!mui.os.plus || (!~id.indexOf('popovers.html')&&mui.os.ios)) {  

                    mui.openWindow({  
                        id: id,  
                        url: this.href,  
                        styles: {  
                            popGesture: 'close'  
                        },  
                        show: {  
                            aniShow: aniShow  
                        },  
                        waiting: {  
                            autoShow: false  
                        }  
                    });  
                } else {  

                    //TODO  by chb 当初这么设计，是为了一个App中有多个模板，目前仅有一个模板的情况下，实际上无需这么复杂  
                    //使用父子模板方案打开的页面  
                    //获得共用模板组  
                    var template = getTemplate('base_default');  

                    //判断是否显示右上角menu图标；  
                    var showMenu = ~href.indexOf('_setting') ? true : false;  

                    var showMenu =  showMenu;  
                    //获得共用父模板  
                    var headerWebview = template.header;  

                    //获得共用子webview  
                    var contentWebview = template.content;  

// var title = this.innerText.trim();
var title=$(this).find('h4').prop("lastChild").nodeValue;

// console.log('id:'+id);
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview, 'updateHeader', {
id:id,
openid:openid,
openurl:openUrl,
title: title,
showMenu:showMenu,
target:href,
aniShow: aniShow
});

                    if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){  
                        var reload = true;  
                        if (!template.loaded) {  
                            if (contentWebview.getURL() != this.href) {  
                                contentWebview.loadURL(this.href);  
                            } else {  
                                reload = false;  
                            }  
                        } else {  
                            reload = false;  
                        }  
                        (!reload) && contentWebview.show();  

                        headerWebview.show(aniShow, 150);  
                    }  
                }  
            }  
        });  
</script>  

template.html

<script type="text/javascript">

    //启用双击监听  
    mui.init({  
        gestureConfig:{  
            doubletap:true  
        }  
    });  
    var contentWebview = null,self = null;  
    mui.plusReady(function () {  
        self = plus.webview.currentWebview();  
        if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){  
                mui.toast('当前网络不可用，请检查设置');  
            }  
    });  

    mui.back = function() {  
        self.hide('auto');  
        setTimeout(function() {  
            titleElem.className = 'mui-title mui-fadeout';  
            titleElem.innerText = '';  
            if(contentWebview==null){  
                contentWebview = self.children()[0];  
            }  
            contentWebview.hide("none");  
        }, 350);  
    }  

    var titleElem = document.getElementById("title")  
    var menuElem = document.getElementById("menu")  

    window.addEventListener("updateHeader", function(e) {  
        console.log('openid：'+e.detail.openid)  
        var id=e.detail.id;  
        var openid=e.detail.openid;  
        var title = e.detail.title;  
        var showMenu = e.detail.showMenu;  
        var href = e.detail.target;  
        var aniShow = e.detail.aniShow;  
        var openurl=e.detail.openurl;  
        titleElem.innerHTML = title;  
        titleElem.className = "mui-title mui-fadein";  
        var display = showMenu ? "" : "none";  
        menuElem.href=openurl;  
        menuElem.setAttribute('id',openid);  
        if (showMenu) {  
            mui.options.keyEventBind.menubutton = true;  
        } else {  
            mui.options.keyEventBind.menubutton = false;  
        }  
        menuElem.style.display = display;  

        if(mui.os.android&&aniShow&&parseFloat(mui.os.version)>=4.4){  

            if(contentWebview==null){  
                contentWebview = self.children()[0];  
            }  

            if (contentWebview.getURL() != href) {  

                contentWebview.loadURL(href);  
            } else {  
                console.log('template_id:'+contentWebview.id)  
                contentWebview.show();  
            }  
            setTimeout(function () {  
                self.show(aniShow);  
            },10);  
        }  
    });  

    var addPage = null;  

    menuElem.addEventListener('tap', function(e) {  
        var id=$(this).attr('id');  
        console.log('templete_menu_id:'+id)  
        mui.openWindow({  
                    id:id,  
                    url:menuElem.href,  
                    show:{  
                        aniShow:'slide-in-bottom',  
                        duration:300  
                    }  
                })  
        e.stopPropagation();  
    });  
    document.querySelector('header').addEventListener('doubletap',function () {  
        if(contentWebview==null){  
            contentWebview = plus.webview.currentWebview().children()[0];  
        }  
        contentWebview.evalJS('mui.scrollTo(0, 100)');  
    });  

    mui.menu = function () {  
        console.log(menuElem.style.display);  
        if(menuElem.style.display !== "none"){  
            if(contentWebview==null){  
                contentWebview = plus.webview.currentWebview().children()[0];  
            }  
            contentWebview.evalJS('mui("#topPopover").popover("toggle")');  
        }  

    }  
</script>  

account_setting.html

<div class="mui-content">
<ul id="OA_task_1" class="mui-table-view">
</ul>
</div>
<script>
mui.init({
seipeBack:true,
preloadPages:[{
id:'account_add.html',
url:'account_add.html'
}]
});

mui.plusReady(function(){
// 添加
add = mui.preload(li.app.normalPage('account_add', {popGesture:'none'}));
li.app.on('.adda', 'tap', showAdd);
li.app.on('.icon-bianji','tap',showEdit);

initList();  

// 监听添加界面参数传递  
window.addEventListener('addItem', addItemHandler);  

});

// 初始化账户设置
function initList(){
qmask.show();
var $ul = $('#OA_task_1').empty();
li.app.query(db, 'select * from inout_accounts order by id desc', function(res){
for (i = 0; i < res.rows.length; i++) {
$ul.append(genLi(res.rows.item(i)));
}
showList($ul);
});
qmask.hide();
}

function genLi(data){
var id = data.id;
var content = data.content;
var li ='<li class="mui-table-view-cell" data-id="'+id+'">' +
'<div class="mui-slider-left mui-disabled">' +
'<a class="mui-btn mui-btn-red mui-icon mui-icon-trash"></a>' +
'<a class="mui-btn mui-btn-yellow mui-icon iconfont icon-bianji"></a>' +
'</div>'+
'<div class="mui-slider-right mui-disabled">'+
'<a class="mui-btn mui-btn-red mui-icon mui-icon-trash"></a>'+
'<a class="mui-btn mui-btn-yellow mui-icon iconfont icon-bianji"></a>'+
'</div>'+
'<div class="mui-slider-handle">'+
''+content+''+
'</div>'+
'</li>';
return li;
}

function showList(ul){
if(ul.find('li').size() > 0 && ul.is(':hidden')) ul.show();
}

// 添加
function showAdd(){
li.app.openshow('account_add', 'slide-in-bottom', 300);
}

//编辑
function showEdit(){
var elem = this;
var parent_li = elem.parentNode.parentNode;
li.app.openshow('account_add', 'slide-in-bottom', 300,function(){
console.log('12');
setTimeout(function() {
mui.swipeoutClose(parent_li);
}, 0);
});
}

function hideAdd(){
li.app.getPage('account_add').show();
}

//接受来自添加界面的参数
function addItemHandler(event){
var title = event.detail.title;
console.log('title'+title)
li.app.query(db, 'select max(id) maxid from inout_accounts', function(res){
var id = (res.rows.item(0).maxid) ? res.rows.item(0).maxid : 0;
li.app.update(db, 'insert into inout_accounts (id, content) values (' + (id+1) + ', "' + title + '")');
$('#OA_task_1').prepend(genLi({id:id+1, 'content':title})).show();
});

}

</script>

account_add.html

<div class="mui-content">
<div class="mui-content-padded">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="账户名称" id="addTitle">
</div>

        <div class="mui-button-row">  
            <button class="mui-btn mui-btn-block mui-btn-primary addItemBtn">保存</button>  
        </div>  
    </div>  
    </div>  

<script>
mui.init({
seipeBack:true
})

mui.plusReady(function(){
resetPage();
li.app.on('.addItemBtn','tap',addItem);
})

//添加newId自定义事件监听
//window.addEventListener('addParam',function(event){
// title.innerHTML=event.detail;
//});

// 重置页面
function resetPage(){
$('#addTitle').val('');
}
//添加账户保存操作
function addItem(){
var title = $.trim($('#addTitle').val()).replace(/\n/g, '');
if(!title){
li.app.alert('请填写账户名称！');
}else{
li.app.getPage('account_add').hide();
resetPage();
li.app.fire('base_default','addItem',{title:title});
var view=plus.webview.getWebviewById('base_default')
mui.fire(view,'addItem',{title:title})
}
}

</script>