数据绑定

数据绑定是分离数据和用户界面最好的方法，对于显示大量数据给用户的应用程序来说，通过数据绑定可以大大减化开发的工作量。

其实数据绑定与现在HTML5流行的概念“模板”是一致的，先用“画app吧”创建好界面的模板，在运行时把数据填充到模板中。对于列表视图，在数据绑定时还可以自动根据列表第一项（或指定的模板项）创建其它列表项。

生成数据模板

绑定数据要先生成数据模板，生成数据模板都非常简单，选择要绑定数据的控件(需要其有子控件，通常是列表)，打开右键菜单，会出现“绑定数据”的菜单项。

menu

通过“绑定数据”的菜单项打开“数据绑定”的对话框。

menu

对话框中会有自动产生的模板。

准备数据

先拷贝出模板（下面是针对列表模板）。

{
	"children": [
		{
			"children": [
				{
					"text": "title"
				},
				{
					"text": "abstraction"
				}
			]
		}
	]
}

模板中只有一个列表项，但是数据可能有很多项，没有关系，让数据重复第一项就好了，后面的数据会自动添加到列表中。

{
	"children": [
		{
			"children": [
				{
					"text": "曾经的美好：再见了，塞班！"
				},
				{
					"text": "摘要：今天诺基亚不仅对外公布了2012年第四季度财务报告，同时它也对外确认已正式停止开发塞班手机，去年年中发布的808 PureView是最后一款塞班设备。这样直白的表态，是正式向外昭告曾经辉煌一时的塞班已死。"
				}
			]
		},/*重复第一项的模板，这些数据会自动添加到列表中。*/
		{
			"children": [
				{
					"text": "一周消息树：亲爱的GitHub，我们怎么访问不了你？"
				},
				{
					"text": "摘要：上周的热点是著名计算机黑客Aaron Swartz于纽约自杀身亡，那本周的热点是什么呢？无疑是GitHub在国内被封，其功
能改进给了中国用户一个Surprise。同时还要跟大家共同分享下Windows RT必死的7大理由，除此之外，Glenn Reid也带领我们回忆了他曾与乔布斯一起工作的
诸多细节。"
				}
			]
		}
	]
}

把准备好的数据放到一个URL中。

自动绑定数据

自动绑定数据只要“数据绑定”的对话框中指定一个数据源的URL即可。

在程序中绑定数据

自动绑定数据比较简单，在程序中绑定数据则有更大的灵活性。

在程序中绑定数据可以调用控件的成员函数bindData或者bindDataUrl来实现。

var list = this.getWindow().findChildByName("ui-list-view");
if(list) {
    list.bindDataUrl("/databinddemo/datasource2.json", null, function(result)
    {
        list.updateDone();
        wtkLog("result:" + result);
    })
    
    list.beginUpdate();
}

bindDataUrl有三个函数：

dataUrl数据源的URL。
preprocess(可选)。数据预处理函数。本函数传入一段数据，返回一段处理过的函数。
onBindDone绑定完成后的回调函数。

有时数据是在程序里面生成的，而不是通过网络获取的，那就可以直接调用bindData函数。具体用法可以参考TODO这个小应用程序。

特殊的属性

我们在准备数据时，除了使用模板中的属性外，还可以指定一些特定属性。

userData 它不并显示出来，只是附加到控件上面，你在后面处理时可以使用它。比如你可以希望在ListItem中保存一个URL，在列表项的Click事件中，你可以拿到这个URL，然后从这个URL中获取数据。
textColor 设置控件的文本颜色。
fillColor 设置控件的填充颜色。
lineColor 设置控件的线条颜色。
fontSize 设置控件的字体大小。
height 设置控件的高度。

完整数据的例子：

{
	"children": [
		{
			"userData":"/databinddemo/1.html",
			"textColor":"red",
			"children": [
				{
					"text": "曾经的美好：再见了，塞班！"
				},
				{
					"text": "摘要：今天诺基亚不仅对外公布了2012年第四季度财务报告，同时它也对外确认已正式停止开发塞班手机，去年年中发布的808 PureView是最后一款塞班设备。这样直白的表态，是正式向外昭告曾经辉煌一时的塞班已死。"
				}
			]
		},
		{
			"userData":"/databinddemo/2.html",
			"children": [
				{
					"text": "一周消息树：亲爱的GitHub，我们怎么访问不了你？"
				},
				{
					"text": "摘要：上周的热点是著名计算机黑客Aaron Swartz于纽约自杀身亡，那本周的热点是什么呢？无疑是GitHub在国内被封，其功能改进给了中国用户一个Surprise。同时还要跟大家共同分享下Windows RT必死的7大理由，除此之外，Glenn Reid也带领我们回忆了他曾与乔布斯一起工作的诸多细节。"
				}
			]
		},
		{
			"userData":"/databinddemo/3.html",
			"children": [
				{
					"text": "为什么苹果的应用审核是个笑话？"
				},
				{
					"text": "摘要：即使移动App开发再风生水起，开发者还得过应用审核这一关，应用审核在一定程度上保证了应用商店的品质，但对于苹果的App Store来说却并不太平，众多开发者对App Store的不满日渐增长。而苹果也未听取意见进而做出任何更改，长此以往，只怕开发者会是可忍孰不可忍。"
				}
			]
		},
		{
			"userData":"/databinddemo/4.html",
			"children": [
				{
					"text": "LBA兴起：未来移动广告将基于地理位置"
				},
				{
					"text": "摘要：LBS我们并不陌生，但什么是LBA？LBA实际上是Location Based Advertising的简称，是指基于地理位置的广告推送，是个全新概念。提供该广告服务的Sense Networks公司CEO David Petersen近日接受了《福布斯》的采访，他表示LBA一定是未来移动广告的趋势。"
				}
			]
		},
		{
			"userData":"/databinddemo/5.html",
			"children": [
				{
					"text": "2012年几大编程语言就业趋势分析"
				},
				{
					"text": "Jobs Tractor网站通过收集Twitter数据并分析2012年度编程语言的流行度。其中PHP排名第一，Java紧跟其后，连续两年摘得年度编程桂冠的Objective C占据第三名。一起来看下你选的这门语言是否热门。"
				}
			]
		}
	]
}

Demo:

demo

Provide feedback

Saved searches