Kero依赖于JQuery,依托基于 MVVM 架构的 Knockout 类库,实现了将NeoUI控件库自由进行数据绑定的前端类库
kero使用了描述性的风格来定义控件
<input type="text" u-meta='{"type":"string", "data":"head", "field":"billnumber"}' />
在普通 HTML 中使用kero语法将在指定DOM上创建控件,并与数据模型关联。一旦创建了关联,控件 将与数据模型同步。每当修改了数据,控件便相应地更新,修改了控件,数据模型也会相应的更新.
扩展控件时可以通过数据模型对数据进行获取&监听和修改
UI控件
UI控件遵循iUAP Design设计规范,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。
UI控件的使用,采用了类似bootstrap的用法,通过定义class名称来声明控件,如按钮控件的定义:
<button class="u-button">BUTTON</button>
开发者不需要通过js代码创建控件,简单易用
模型结构
数据模型
数据模型主要是对MVVM架构中的Model层做增强处理。主要功能有:
- 以行、列的形式对数据做存储,并对外暴露一批增删改查的API,方便开发者对页面数据的处理,而且所有开发者之间做到统一,减少出错概率。
- 数据增加状态标识新增或修改,方便开发者使用。
- 具有分页缓存能力,可在前台处理分页(非必要情况下,不推荐前台分页)。
- 具有事件触发器,把数据变化触发出去,供开发者监听使用。
模型定义:
var myDataTable = new u.DataTable({
meta:{
field1:{type:date},
field2:{}
}
})
meta中是模型的字段信息,字段名对应的对象为字段的属性定义。
其中常用字段的属性定义的有type、以及一些校验属性(详情参考这里)、default(设置字段的默认值)以及不同控件的属性设置等。没有字段属性时,可以为空对象。
数据载入到模型中
dataTable.setSimpleData
方法把从后台查询到的json数据载入模型之中:
dataTable.setSimpleData([
{"id": "001","name": "tom"},
{"id": "002","name": "john"}
])
数据载入到模型中之后,数据被存储在一组Row
对象之中,json数组中的每一个对象,对应dataTable中的Row
对象中。
新增数据行并赋值
var row = dataTable.createEmptyRow();
row.setValue('id','003')
修改已存在的行中数据
var row = dataTable.getRow(index);
row.setValue('name','jerry');
控件模型
控件模型是为解决复杂交互页面中,业务逻辑对数据存在一系列处理需求而设计的。用来简化开发者对相关逻辑的开发。比如:数据的必填、数据的各种校验、数据的显示格式等。
控件模型与UI和数据模型之间的关系表现为:
在一般的场景中,数据模型可以直接与UI进行数据绑定。当有数据处理需求时,可以通过控件模型来处理UI和数据模型之间的数据通信。控件模型在处理数据的同时,会进行相关业务逻辑的处理。