初识Kero

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


Kero是一个用于扩展MVVM架构中数据模型的JS类库,实现了数据和UI的双向绑定,帮助开发者快速构建数据驱动型应用,解决复杂数据交互问题。Kero 做为 MVVM 架构中 Model 层的增强,主要功能有:以行、列的形式对数据做存储,并对外暴露一批增删改查的API,方便开发者对页面数据的处理,而且所有开发者之间做到统一,减少出错概率。数据增加状态标识新增或修改,方便开发者使用。具有分页缓存能力,可在前台处理分页(非必要情况下,不推荐前台分页)。具有事件触发器,把数据变化触发出去,供开发者监听使用。目录说明:├─css 控件css ├─dist 产出后的资源 ├─docs 文档相关 ├─examples 示例文件     ├─datatable 关联datatable示例     ├─ui 单独控件示例 ├─snippets 文档及代码片段     ├─docs 文档片段     │  ├─grid.md 文档片段:replaceui将替换为ui示例,replacedatatable将替换为datatable示例。     └─examples 示例片段         └─grid 与grid.md对应的目录,示例目录下必须存在widget.css,widget.html,widget.js,说明.txt             └─datatable 关联datatable示例片段             └─ui 单独控件示例片段 ├─vendor 第三方库,后续删除 ├─app.js 依据snippets中的片段生成docs以及examples中的最终产出 ├─gulpfile.js 通过gulp对项目源文件(CSS/JS)生成dist中的最终产出 ├─package.json node说明 └─README.md 项目说明 标签:Kero
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值