界面驱动数据
checkbox状态扭转后, 去批改与他绑定的数据
"ui";ui.layout( <vertical gravity="center_horizontal"> <horizontal gravity="center" margin="30"> <checkbox id="checkbox"></checkbox> </horizontal> </vertical>);ui.checkbox.on("check", (checked) => { log(checked);});数据驱动界面
"ui";engines.all().map((ScriptEngine) => { if (engines.myEngine().toString() !== ScriptEngine.toString()) { ScriptEngine.forceStop(); }});ui.layout( <vertical gravity="center_horizontal"> <list id="list"> <horizontal gravity="center" w="*" margin="10"> <text textColor="#222222" textSize="16sp" text="{{this.num}}"></text> <checkbox id="checkbox" checked="{{this.state}}"></checkbox> </horizontal> </list> </vertical>);let dataList = [];for (var i = 0; i < 10; i++) { dataList.push({ num: i, state: !random(0, 1) });}ui.list.setDataSource(dataList);ui.list.on("item_click", function (item, i, itemView, listView) { toastLog(i);});ui.list.on("item_bind", function (itemView, itemHolder) { //绑定勾选框事件 itemView.checkbox.on("check", function (checked) { let item = itemHolder.item; item.state = checked; });});setTimeout(() => { dataList.map((item, i) => { item.state = !item.state; }); ui.list.adapter.notifyDataSetChanged(); toastLog("更新数据");}, 2000);UI界面
在这个代码示例中,
数据驱动界面与界面驱动数据共存
界面驱动数据
勾选框能够扭转dataList中的数据
ui.list.on("item_bind", function (itemView, itemHolder) { //绑定勾选框事件 itemView.checkbox.on("check", function (checked) { let item = itemHolder.item; item.state = checked; });});数据驱动界面
dataList批改后, 告诉界面更新
setTimeout(() => { dataList.map((item, i) => { item.state = !item.state; }); ui.list.adapter.notifyDataSetChanged(); toastLog("更新数据");}, 2000);如何获取某个勾选框的状态?
每个勾选框都隐形或者显性的绑定一个序号,
通过序号来获取勾选框的状态
在dataList中, 有一个num键, 就是显性的给checkbox编一个序号,
当要获取某个checkbox的勾选状态时, 就这样做
dataList[num].state这就要求咱们, 要放弃控件的状态和数据的强一致性
当checkbox被点击后, 要及时更新dataList中的数据;
当dataList的数据更改后, 要及时更新checkbox的状态
如何设置某个勾选框的状态?
setTimeout(() => { dataList[3].state = !dataList[3].state; ui.list.adapter.notifyDataSetChanged(); toastLog("更新数据");}, 4000);先批改dataList指定序号的数据,
而后告诉listView更新勾选框的状态