本文旨在介绍如何用最少的代码在正确的地方写正确的代码，以达到提高可维护性的目的，文字和代码分离不便于解释，详见以下代码：
/**
* 省略的地方主要包含
* 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>
网友评论