初识Kero

最新推荐文章于 2022-12-07 12:11:47 发布

原创最新推荐文章于 2022-12-07 12:11:47 发布 · 689 阅读

CC 4.0 BY-SA版权

1 篇文章

订阅专栏

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层做增强处理。主要功能有：

模型定义：

   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和数据模型之间的数据通信。控件模型在处理数据的同时，会进行相关业务逻辑的处理。