模块化加载编辑页面方法：
一、列表页面：
- html中引入的js文件只保留以下三个，其他的js文件都通过require.js加载，如下：
<script src="../../../../trd/requirejs/require.debug.js"></script>
<script src="../../../../require.config.js"></script>
<script src="list.js" type="text/javascript"></script>
- Html代码结构
<div id="list-container" class="container-fluid ncrd collapse in">
<!—列表页面内容-->
</div>
<div id="edit-container " class="container-fluid ncrd collapse">
</div>
- js文件改为模块化的方式，加载其他必须的js模块，如下：
define(['jquery', 'knockout', 'bootstrap', 'uui', 'tree', 'grid', 'ip'], function ($, ko) {
window.ko = ko;
var listApp, editApp;
…
function init(contanier){
listApp = u.createApp({
el: contanier,
model: viewModel
});
…
};
}
init('div#list-contanier');
);
- js文件增加以下代码，如下：
//加载编辑模块方法
function loadEditApp(onLoaded) {
var container = $('div#edit-page')
var url = "fap/system/config/elerule/rule";
requirejs.undef(url);
require([url], function (module) {
ko.cleanNode(container[0]);
container.html('');
container.html(module.template);
module.init(container[0]);
editApp = module;
if(onLoaded){
onLoaded();
}
});
}
// 编辑页面关闭时的回调事件，save:保存关闭 cancel：取消关闭
var onEditAppClose = {
save : function() {
go("#list-page");
// todo 刷新列表页面数据
},
cancel : function() {
go("#list-page");
}
};
// 切换当前显示的界面
function go(showCollapse) {
$("div.container-fluid.ncrd.collapse").collapse('hide');
$(showCollapse).collapse('show');
}
// 编辑页面加载完成后的回调函数，需要等待编辑页面加载完才能执行的代码放在这里
function onEditAppLoaded(billId) {
go("#edit-page");
editApp.show(billId, onEditAppClose);
};
// 编辑按钮单击事件
viewModel.btnEditClick = function() {
// 要编辑的单据id
var billId = getSelectedBillId();
if (!editApp) {
loadeditApp(onEditAppLoaded, billId);
} else {
onEditAppLoaded(billId);
}
};
二、编辑页面：
- html文件中去年所有js文件的引入，文件扩展名改为._html（因为基于主域开发时，html文件无法通过require.js加载）。
- js文件改为模块化方式，如下：
define(['jquery', 'knockout', 'text!fap/system/config/elerule/rule._html',
'text!fap/system/config/elerule/rule.css', 'bootstrap', 'uui', 'tree', 'grid', 'ip'],
function ($, ko, template) {
window.ko = ko;
var onCloseCallback;
…
function init(contanier){
listApp = u.createApp({
el: contanier,
model: viewModel
});
…
};
return {'model': viewModel,
'template': template,
'init': init,
'show': show
};
}
);
- js文件增加以下代码，如下：
//显示单据数据
function show(billId, callback){
onCloseCallback = callback || {};
//todo 根据billId查询单据数据，显示在页面上。
}
// 保存按钮单击事件
viewModel.btnSaveClick = function () {
if(onCloseCallback.save){
onCloseCallback.save();
}
};
//关闭按钮单击事件
viewModel.btnCloseClick = function () {
if(onCloseCallback.cancel){
onCloseCallback.cancel();
}
};
