控件模型

控件模型

控件模型是为解决复杂交互页面中,业务逻辑对数据存在一系列处理需求而设计的。用来简化开发者对相关逻辑的开发。比如:数据的必填、数据的各种校验、数据的显示格式等。

控件模型与UI和数据模型之间的关系表现为:

在一般的场景中,数据模型可以直接与UI进行数据绑定。当有数据处理需求时,可以通过控件模型来处理UI和数据模型之间的数据通信。控件模型在处理数据的同时,会进行相关业务逻辑的处理。

基本示例

本例实现如下效果:

<!--
HTML
u-meta:框架特有标记,框架通过识别此标记创建对应UI组件,以及进行数据绑定
id,type.data,field为必选项
id:创建组件唯一标识
type:创建组件对应的类型
data:指定数据模型中的数据集
field:绑定数据集中对应的字段
-->
<input id="demo_input" u-meta='{"id":"t1","type":"string","data":"dt1","field":"f1"}' />
<div id="demo_div"></div>
// JS
var app,viewModel;
/**
* viewModel 创建数据模型
* dt1 创建的数据集
* f1 创建数据集中的字段
* type:指定数据对应的类型
*/
viewModel = {
dt1: new u.DataTable({
meta:{
f1:{
type:'string'
}
}
})
};
/**
* app 创建框架服务
* el 指定服务对应的顶层DOM
* model 指定服务对应的数据模型
*/
app = u.createApp({
el:'body',
model:viewModel
});
// 数据集dt1创建空行,并为字符f1赋值'Hello World'
var r = viewModel.dt1.createEmptyRow();
r.setValue('f1','Hello World');
/**
* 数据集发生改变时,将#demo_input数据显示在#demo_div中
* @return {[type]} [description]
*/
var demoInput = document.getElementById('demo_input');
var demoDiv = document.getElementById('demo_div');
var getDtValue = function() {
var dtVal = viewModel.dt1.getValue('f1');
demoDiv.innerHTML = dtVal;
};
demoInput.addEventListener('blur',getDtValue);
getDtValue();

API

<div class="u-text" u-meta='{"id":"f1","data":"dt1","field":"f1","type":"u-text"}'>
<input class="u-input"/>
</div>

u-meta为框架特有标记,框架通过识别此标记创建对应UI组件,以及进行数据绑定 ,u-meta中的必填项如下:

标签 说明
id 创建组件唯一标识
type* 创建组件对应的类型
data 指定数据模型中的数据集
field 绑定数据集中对应的字段

Type类型

数据

类型 说明
integer 整数数字输入框
float 浮点数字输入框

日期

类型 说明
u-year 年份控件
u-month 月份输入框
u-yearmonth 年份月份控件
u-time 时间控件
u-clockpicker 时间控件,显示为钟表形式
u-date 日期输入框
u-datetime* 日期时间输入框

文本

类型 说明
textarea 文本域
u-text 文本输入框

选择下拉

类型 说明
u-combobox* 下拉框
u-checkbox* 复选框
u-radio* 单选

级联组件

类型 说明
u-cascader* 级联组件

进度条

类型 说明
u-progress* 进度条

类型 说明
tree* 树控件