文档章节

数据绑定介绍

voxer
 voxer
发布于 2016/04/18 06:59
字数 2326
阅读 12
收藏 0

数据绑定是在应用程序 UI 与数据源建立连接的过程。如果绑定正确数据,则当数据更改其值时,绑定到数据的UI属性值会自动反映更改。DeviceOne支持灵活的数据绑定,使UI展示和数据可以清晰的分离。目前还不支持双向绑定,只支持数据到展示的传递。
使用DeviceOne开发App,你可以不使用任何数据bind机制,传统的获取对象,给对象每一个单个属性设置值也可以实现所有功能。但是使用bind机制可以减少代码,优化框架,使开发工作事半功倍。

1.基本绑定方式:

bind包括源和目标,DeviceOne的bind目标通常指UI组件,所有的UI组件都支持基本的bind方式。实际上只要一个组件有属性就可以支持bind,比如UI和MM(MultitonModule)组件都有属性,都支持bind。

bind的源我们目前提供了2个组件do_ListDatado_HashData分别表示二种数据结构,hash和array,因为整个DeviceOne的数据基础都是json格式,所以这2个数据组件都是只能处理json格式。

UI和MM类的基类都提供了3个相关的方法来实现bind机制。

  • setMapping方法:设置一个UI组件或者MM组件的属性和数据的映射关系。

  • bindData方法:设置UI组件或者MM组件的数据源,这个数据源目前只能是do_ListDatado_HashData.

  • refreshData方法:当bind的数据源数据发生变化后,调用这个方法来刷新数据源的展示。

复制代码

 function test1() {
        // 创建一个HashData对象
        var data = mm("do_HashData");
        // 给Button创建一个属性到数据的映射,其中text和bgColor是Button的2个属性
        btn1.setMapping({
                "text" : "text_key",
                "bgColor" : "color_key"
        });
        // 建立Button和HashData的绑定
        btn1.bindData(data);
        // 数据变化驱动UI属性变化
        // 1. 修改数据
        data.addData({
                "text_key" : "映射到HashData",
                "color_key" : "FF0022AA"
        });
        // 2. 刷新UI,这个按钮的文本变成“映射到HashData”,背景颜色变为“FF0022AA"
        btn1.refreshData();
}

复制代码

其中一个UI的映射可以作为bindData的一个参数,比如

复制代码

function test2() {
        // 创建一个HashData对象
        var data = mm("do_HashData");
        // 建立Button和HashData的绑定,同时设置映射关系
        btn2.bindData(data, {
                "text" : "text_key",
                "bgColor" : "color_key"
        });
        // 数据变化驱动UI属性变化
        // 1. 修改数据
        data.addData({
                "text_key" : "映射到HashData-直接设置映射",
                "color_key" : "FFCC00AA"
        });
        // 2. 刷新UI,这个按钮的文本变成“映射到HashData-直接设置映射”,背景颜色变为“FFCC00AA"
        btn2.refreshData();
}
// .....

复制代码

其中HashData对象支持path,中间用.号来隔开,比如

复制代码

function test3() {
        // 创建一个HashData对象
        var data = mm("do_HashData");
        // 给Button创建一个属性到数据的映射,其中text和bgColor是Button的2个属性
        // HashData对象支持path,中间用.号来隔开
        btn3.setMapping({
                "text" : "node1.text_key",
                "bgColor" : "node1.color_key"
        });
        // 建立Button和HashData的绑定
        btn3.bindData(data);
        // 数据变化驱动UI属性变化
        // 1. 修改数据
        data.addData({
                "node1" : {
                        "text_key" : "映射到HashData-支持path",
                        "color_key" : "F00FEEAA"
                },
                "node2" : "xxxx"
        });
        // 2. 刷新UI,这个按钮的文本变成“映射到HashData-支持path”,背景颜色变为“F00FEEAA"
        btn3.refreshData();
}

复制代码

其中数据源也支持ListData,中间用:加数字索引来表明是一个list的一个元素

复制代码

function test4() {
        // 创建一个HashData对象
        var data = mm("do_HashData");
        // 给Button创建一个属性到数据的映射,其中text和bgColor是Button的2个属性
        // HashData对象支持json array,中间用:加数字索引来表明是一个array的一个元素
        btn4.setMapping({
                "text" : "node1:2.text_key",
                "bgColor" : "node1:2.color_key"
        });
        // 建立Button和HashData的绑定
        btn4.bindData(data);
        // 数据变化驱动UI属性变化
        // 1. 修改数据
        data.addData({
                "node1" : [ {
                        "text_key" : "我是Button1",
                        "color_key" : "FFFFEEAA"
                }, {
                        "text_key" : "我是Button2",
                        "color_key" : "FFFFEEBB"
                }, {
                        "text_key" : "映射到HashData-支持JSONArray",
                        "color_key" : "00FFEECC"
                } ],
                "node2" : "xxxx"
        });
        // 2. 刷新UI,这个按钮的文本变成“映射到HashData-支持JSONArray”,背景颜色变为“00FFEECC"
        btn4.refreshData();
}
function test5() {
        // 创建一个ListData对象
        var data = mm("do_ListData");
        // 给Button创建一个属性到数据的映射,其中text和bgColor是Button的2个属性
        // do_ListData对象支持:加数字索引来表明是一个array的一个元素
        btn5.setMapping({
                "text" : ":2.text_key",
                "bgColor" : ":2.color_key"
        });
        // 建立Button和HashData的绑定
        btn5.bindData(data);
        // 数据变化驱动UI属性变化
        // 1. 修改数据
        data.addData([ {
                "text_key" : "我是Button1",
                "color_key" : "FFFFEEAA"
        }, {
                "text_key" : "我是Button2",
                "color_key" : "FFFFEEBB"
        }, {
                "text_key" : "映射到ListData",
                "color_key" : "0FF11ECC"
        } ]);
        // 2. 刷新UI,这个按钮的文本变成“映射到HashData-支持JSONArray”,背景颜色变为“00F11ECC"
        btn5.refreshData();
}

复制代码

其中bind目标UI也支持path,中间用.隔开,只不过有一个限制就是这个时候的绑定目标UI必须是这个ui文件的根节点。这种情况应用更灵活方便,不需要为每一个UI创建一个映射和一个数据源,这个ui文件里所有UI组件可以共用一个映射和数据源。比如

复制代码

function test6() {
        // 根据统配符$来获取ui文件的根节点,也可以根据它的ID获取对象
        var rootview = ui("$");
        // 创建一个HashData对象
        var data = mm("do_HashData");
        // 给rootview创建多个子UI的属性到数据的映射,其中button_id1.text和label_id1.text
        // 分别表示这个ui文件里一个id为button_id1的Button组件和id为label_id1的Label组件
        rootview.setMapping({
                "do_Button_6.text" : "node1.text_key",
                "do_Button_7.text" : "node2",
                "do_Button_6.bgColor" : "node1.color_key",
                "do_Button_7.bgColor" : "node3"
        });
        // 建立Button和HashData的绑定
        rootview.bindData(data);
        // 数据变化驱动UI属性变化
        // 1. 修改数据
        data.addData({
                "node1" : {
                        "text_key" : "多个子UI绑定1",
                        "color_key" : "1FFFE1BB"
                },
                "node2" : "多个子UI绑定2",
                "node3" : "1111FFBB"
        });
        // 2. 刷新UI,二个按钮的文本变成“多个子UI绑定1,2”,背景颜色变为“1F1F1EBB,11111EBB"
        rootview.refreshData();
}

复制代码

2. 特殊绑定方式:

这种bind机制不是所有UI组件都具有的,只有类似ListView,GridView等组件才有,这种组件的共性在于用户看到的视图是有限的,但是实际上通过手势滑动可以有很多个数量不定的视图。这种bind有以下几个概念:

  • templates:模板是这种类型组件的一个属性,里面包含的是ui文件名。不管这种View有多少个子视图,但是模板数量是固定的,比如大部分ListView有很多个单元,但是这些单元都是共用一个或几个模板,只不过每一个单元对应的数据不一样。

  • bindItems:这个是这种类型组件的一个方法,这个方法的参数只能是do_ListData,表明这个视图和一个list数据结构的数组对象绑定在一起。

  • refreshItems:类似UI基类的refreshData方法,这个方法是这种类型组件的一个方法。当bind的ListData发生变化后,通过这个方法来刷新界面。

以下是一个ListView的示例代码,这里面的代码实际上是写在不同的2个ui文件对应的ui.js文件里,比如ListView所在的文件叫listview_sample.ui.js

复制代码

// listview_sample.ui.js文件
// 建立绑定.....
// 1. 根据ListView的ID获取一个ListView的对象
var listview = ui("listview_id1");
// 2. 设置ListView的模板,这里只设置了一个模板文件,其实有可能有多个。
//这个示例中,假设这个模板文件里面只有一个id为button_id1的Button组件
//在ui文件里设置listview的templates属性为"source://listview_cell.ui"
//也可能支持多模板比如templates属性为"source://listview_cell1.ui,source://listview_cell2.ui"
// 3. 创建一个ListData对象
var data = mm("do_ListData");
// 4. 建立ListView和ListData的绑定
listview.bindItems(data);
// 数据变化驱动UI属性变化
// 1. 修改数据
data.addData([{"text_key":"我是Button1","color_key":"#FFFFEEAA"},
              {"text_key":"我是Button2","color_key":"#FFFFEEBB"},
              {"text_key":"我是Button3","color_key":"#FFFFEECC"},
              {"text_key":"我是Button4","color_key":"#FFFFEEDD"},
              {"text_key":"我是Button5","color_key":"#FFFFEEEE"},
             ]);
// 2. 刷新UI,这个ListView会增加6个子视图,每个视图里的按钮的文本变成“我是Button”+n,
//背景颜色变为“FFFFEE"+XX
listview.refreshItems();

复制代码

以上的例子想要运行成功,还需要在listview_cell.ui对应的listview_cell.ui.js文件里添加以下类似代码

复制代码

//listview_cell.ui.js文件
// 建立绑定.....
// 1. 根据统配符$来获取ui文件的根节点,也可以根据它的ID获取对象
var rootview = ui($);
// 2. 给rootview创建子UI的属性到数据的映射,其中button_id1.text和button_id1.bgColor
//表示这个ui文件里有一个id为button_id1的Button组件
rootview.setMapping({"button_id1.text":"text_key","button_id1.bgColor":"color_key"});
//注意这里不需要再单独bind一个数据源了,这个文件作为listview的模板文件,会自动和listview绑定的数据建立bind关系。
//listview绑定的数组数据中每一项元素都是这个模板文件的数据源。

复制代码

ListView用的很广,示例也非常多,参考示例大全

3. dataRefreshed 事件:

这个事件也很重要,通常一个UI对象和一个Hashdata建立映射关系之后,当hashdata更新数据后,UI对象调用refreshData或refreshItems后,UI对象会接受到数据,然后更新对应的属性值,之后会触发这个事件。
这个事件会通常可以用在Listview,Gridview,Slideview这种UI组件,它们都包含多个ui文件,都有模板ui文件。通过这个事件可以实现主ui和模板ui的数据通讯。
详细的示例我们参考数据传递的文档


© 著作权归作者所有

voxer
粉丝 4
博文 15
码字总数 17624
作品 0
海淀
私信 提问
一句代码实现批量数据绑定[下篇]

《上篇》主要介绍如何通过DataBinder实现批量的数据绑定,以及如何解决常见的数据绑定问题,比如数据的格式化。接下来,我们主要来谈谈DataBinder的设计,看看它是如何做到将作为数据源实体的...

长平狐
2012/09/04
97
0
Windows 8实例教程系列 - 数据绑定高级实例

xhesrc="http://www.silverlightchina.net/uploads/allimg/130324/2345231634-0.jpg" src="http://www.silverlightchina.net/uploads/allimg/130324/2345231634-0.jpg" /> 上篇xhe_href="htt......

冷秋寒
2018/06/29
0
0
Windows 8实例教程系列 - 数据绑定基础实例

数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本文将讨论Windows 8应用开发数据绑定的使用...

冷秋寒
2018/06/29
0
0
JEPLUS之循环报表—JEPLUS软件快速开发平台

JEPLUS之循环报表 我们在创建报表是想要把每一条数据都生成一个表格,也就是表单报表,那我们如何来实现这一个功能呢,今天我来介绍下如何实现循环报表。 一。效果展示 二、实现步骤 1、首先...

JEPLUS
2018/06/25
18
0
一句代码实现批量数据绑定[上篇]

对于一个以数据处理为主的应用中的UI层,我们往往需要编写相当多的代码去实现数据绑定。如果界面上的控件和作为数据源的实体类型之间存储某种约定的映射关系,我们就可以实现批量的数据绑定。...

长平狐
2012/09/04
49
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL参数search_path影响及作用

search_path稍微熟悉PG就会用到,用法这里就不必讲,本篇主要讲它在程序里怎样处理。 1、GUC参数定义 这是个 config_string 参数 {{"search_path", PGC_USERSET, CLIENT_CONN_STATEMENT,...

有理想的猪
56分钟前
8
0
Qt程序各个平台打包发布及安装程序大全

本文链接:https://blog.csdn.net/zhengtianzuo06/article/details/78468111 通用: 1.准备图标 图标可以直接使用一般格式的图片制作, 比如jpg, png等 推荐使用Photoshop制作原始图 推荐使用I...

shzwork
今天
4
0
springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
22
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部