模块化加载编辑页面方法

模块化加载编辑页面方法：

一、列表页面：

1. html中引入的js文件只保留以下三个，其他的js文件都通过require.js加载，如下：

2. Html代码结构

3. 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');
);

4. 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);
              }
           };

二、编辑页面：

1. html文件中去年所有js文件的引入，文件扩展名改为._html（因为基于主域开发时，html文件无法通过require.js加载）。
2. 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
                   };
}
);

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