AppWorker教程UI复用

UI复用

模板复用机制是android，ios等移动开发技术中类似listview，gridview,slideview等等之类组件常用的技术，AppWorker的模板复用完全是和他们一致，AppWorker有很多组件基本上涉及到多数据和模板的都会用到复用机制，有必要专门介绍一下。
以下都是以listview为例，但是其实整个机制适合所有AppWorker类似的组件。

通过do_ScrollView展示多个View

我们先假定没有do_ListView组件，但是我们需要展示10个View，这10个View样式基本上是一样的，10个View加起来高度超过了屏幕，我们这个时候需要用到do_ScrollView组件，参考下图：

image

do_ScrollView的高度和屏幕高度一样，10个View组成的do_ALayout/do_LinearLayout比Scrollview高不少，作为do_ScorllView的子View，这样在运行时上下滑动。

这种情况使用do_SrcollView是很好的方式。但是我们假定如果需要显示100条数据，或者1000条数据，还能用Scrollview吗?显然是不行的，每一个View都会占用一部分内存，10个View的内存App轻易处理，但是100个1000个View在内存里App会马上崩溃。

通过do_ListView展示多个View

这个时候就要用到复用机制了，我们以do_ListView来说明。我们假定有100条数据，假定屏幕的大小正好是6个小View的高度和。那么我们就用8个View来显示这100条数据，而不是用100个View来显示。看下图：

image

我们可以看到初始状态View1和View8看不到，我们只能看到View2&＃8211;>View7，这6个View分别对应数据Data1&＃8211;>Data6.

如果我们手势下滑，View8就会上滑动，但是同时会把View1移动到最下面，如下图：

image

我们可以看到这个时候View2和View1看不到，我们只能看到View3&＃8211;>View8,这6个View分别对应数据Data2&＃8211;>Data7.

就这样我们不管怎么上下滑动，显示100条数据只需要8个View，这8个View不断的更新数据，不断的复用来达到这个效果。

复用机制要注意的问题

1. 因为每一个View的样式是通过数据来决定的，同时View又是复用的，对一个View的操作导致样式变化需要更新到data，否则复用的View会样式错乱。

我们来看这个例子，这个模板view包含一个do_Label显示对应数据里的id字段，另外还有一个do_CheckBox组件，缺省是没有选中，目前显示的是第3条到第8条数据，显示后，用手势点击把第4条数据对应的view3里的checkbox勾选上。

image

当我们往下滑动，view不断的被复用，当滑动到第7条数据的时候，view3被第12条数据复用了，用户就会发现第12条数据对应的checkbox被勾选了，这不是用户期望的。

image

如何处理这个问题? 其实就是给对应的data每一项增加一个新的字段，比如叫checked用来标示选中的状态，如果我们点中了一项，就更新一下对应的data的checked属性。

image

这样，checkbox的选中状态是由data里的checked属性来控制，就不会出现这个问题了。

这里还要特别注意的是，每一行的数据必须都包含所有字段，不能缺字段，如果缺少，就会在复用其它view的时候也会导致错乱。比如上面的数据如果改成

image

最后也会因为view的复用导致显示的错乱，因为&＃8221;id&＃8221;==5的哪一行没有指定&＃8221;checked&＃8221;字段，但是复用的view不确定，从而导致checkbox有可能是选中的也有可能没选中状态。

完整的例子可以参考示例里的test1和test2

2. dataRefreshed事件

因为listview对应的每一行的view的ui都是复用的，所以对应的ui.js逻辑代码也是复用的，只会执行一次，但是每一个view不断的更新数据，我们有时候需要在更新数据后做某些操作，就可以使用dataRefreshed事件.参考示例代码:

虽然每个ui都有这个事件，但是起作用的必须是当前ui文件的根节点，也就是ui(&＃8220;$&＃8221;) 这个$表示一个ui文件的根节点的关键字，如果知道这个根节点的id，也可以用ui(&＃8220;root_id&＃8221;)

root.setMapping({
"index_label.text" : "name",
"do_CheckBox_1.checked" : "checked"
});
root.on("dataRefreshed", function() {
// 当数据更新到这个view之后才会触发，这个时候根据checked值，修改背景色
// 这个事件在listview上下滑动的时候会执行多次，所以尽量不要在这个函数里加太多操作，否则会卡顿
change_bgcolor();
})
function change_bgcolor() {
if (check_label.checked)
index_label.bgColor = "FF0000FF";
else
index_label.bgColor = "FF000000";
}


我们可以看到这个模板并没有bind那个label的背景颜色，但是需要根据checkbox的状态变化而变化背景色，则需要订阅dataRefreshed事件。
详细的示例参考这里

3. 多模板

我们上面看到的所有示例都是以listview的单模板为例，也就是每一行的模板对应的ui文件都是一样的。
但是实际上AppWorker的模板机制支持多模板，可以模板文件完全不一样。而且真实的App很多复杂界面都是由多模板来实现。

设置的方式也很简单，只需要给listview的templates设置多个模板ui文件即可，中间用逗号隔开。如下图：listview的templates属性值就是
source://view/cell.ui,source://view/slideview.ui
其中第一个ui表示模板0，第二个ui表示模板1

image

绑定数据也类似，每一行对应的数据结构和模板一致就可以。但是需要注意的是需要增加一个预制的template字段，比如上图对应的数据应该是如下格式：

[
{
"template": 1, //1表示这个对象里的数据是source://view/slideview.ui里的数据
"s_tag": [
{
"i_source": "source://image/1.png"
},
{
"i_source": "source://image/2.png"
},
{
"i_source": "source://image/3.png"
}
]
},
{
"template": 0,//0表示这个对象里的数据是source://view/cell.ui里的数据
"b_text": "button1",
"l_text": "1label"
},
{
"template": 0,
"b_text": "button2",
"l_text": "2label"
},
{
"template": 0,
"b_text": "button3",
"l_text": "3label"
}
]


详细的示例参考示例1 示例2 示例3