Hap结合Kendo grid组件最佳实践

本文旨在介绍如何用最少的代码在正确的地方写正确的代码，以达到提高可维护性的目的，文字和代码分离不便于解释，详见以下代码：
/**
 * 省略的地方主要包含
 * 1. 文件(模块)介绍、版权信息
 * 2. 头部模板引入 
 * 3. 快码引入
 */
...
<style>
// 此处统一存放文件内部要用到的样式，利于维护
  #grid {

  }
</style>

<body>
<div id="page-content"> 
    /**
     * 良好的grid的相关html主体代码只有这三行
     * 请不要在此处编写grid的工具条按钮及条件查询组件
     * 详见 grid的toolbar属性及条件查询模板
     */
    <div id="grid"></div>
</div>

/** 
 * 条件查询组件模板 支持详细查询 Hap已经封装了kendoQueryPanel组件
 */
<script id="query" type="text/x-kendo-template">
   <div class="pull-right"  id="queryPanel"  style="margin-right:5px;">
        // 简单查询 
        <div class="k-query-simple">
            <input data-bind="value:model." id="sourceServer" style="margin-right:5px;width:150px;" />
            <input data-bind="value:model." id="targetServer" style="width:150px;"  />
        </div>
        // 详细查询
        <div class="k-query-detail">
            <div class="row" style="margin-bottom:5px">
                <input data-bind="value:model." class="k-textbox" style="margin-right:5px;width:150px;" />
                <input data-bind="value:model." class="combobox" style="width:150px;" />
            </div>
        </div>
    </div>
</script>

// 主要的js逻辑在此处编写
<script>
 /**
  * 【重点】Hap框架已经封装了创建Grid组件专用viewMode的方法，请不要重复造轮子！
  *  请不要重复造轮子！请不要重复造轮子！重要的事说三遍！！！
  * 【参见】Hap源码 —— kendo.hap.js
  */
  var viewModel = Hap.createGridViewModel('#grid',{
    model: {
      // 此处存放自己其他所需委托viewModel保存的数据
    }
  });

 /**
  * 详见上一个方法注释
  */
  var dataSource = Hap.createGridDataSource({
   // gird CRUD基础路径 
   url:  '',
   model: {
     // id对应的字段
     id: '',  
   }，
   // 其他需配置的内容 同kendo.data.DataSource
   ...
  });

  $('#grid').kendoGrid({
    dataSource: dataSource,
    // grid的工具条请不要直接在html,请好好利用grid的toolbar属
    //  性设置，封装性更好，维护更容易   
    toolbar: [
      {
        template: "<span data-bind='click:create' class='btn btn-primary k-grid-add' style='float:left;margin-right:5px;' ><i class='fa fa-plus-square' style='margin-right:3px;'></i>新建</span>"
      },
      // 引入条件查询面板模板
      {
        template: kendo.template($('#query').html())
      }
     ],
     // 其他配置项
     ...
  });

  // 给查询模板，自动生成查询及重置按钮 在grid初始化后调用 
  $('#queryPanel').kendoQueryPanel({
    queryFunction: function () {
      viewModel.query();
    },
    resetFunction: function () {
      viewModel.reset();
    }
  });
  
  /**
   * 其他组件可以在此位置进行生成，切记在viewModel绑定之前 , 
   * 以下为kendo comboBox组件生成示例 
   */
  $('#id').kendoComboBox({
    dataSource: ,
    valuePrimitive: true,   
    dataTextField: '',
    dataValueField: '',
  });

  /**
   * viewModel 只需绑定一次，不要针对每个组件都去做绑定
   * 有可能遗漏组件的绑定，不利于维护
   * 【注意】在js文件最末绑定，否则可能出现部分组件
   *  未绑定上的问题
   */
  kendo.bind($('#page-content'), viewModel);
</script>
</body>
</html>
最后编辑于：2017.12.10 21:22:44