购物车的简单示例

【代码分析】
listview所在的ui文件是source://view/index.ui, 模板cell所在的ui文件是source://view/cell.ui，这2个文件都在一个Page上，但是处于不同的闭包环境。

* 数据分享：可以通过js环境的全局变量来分享，但是不建议使用不带var的变量声明，可以使用deviceone这个共享区
//index.ui.js 定义变量

//定义2个全局变量
deviceone.checked = "source://view/checked.png";
deviceone.unchecked = "source://view/unchecked.png";

//cell.ui.js 使用变量

checkedLayout.on("touch", function() {
if (checkedImage.source==deviceone.checked) {
checkedImage.source = deviceone.unchecked;
} else {
checkedImage.source = deviceone.checked;
}
fireMyorder();
})

* 从index.ui传递数据到cell.ui ：这种方式是listview大家看的比较常见的例子，通过数据bind的方式
//index.ui.js 获取数据，bind数据

var json_path = "data://do_ListView/cars.json";// 本地缓存的数据
if (storage.fileExist(json_path)) {
storage.readFile(json_path, function(data, e) {
// deviceone.print(JSON.stringify(data));
listdata.addData(data);
listview.bindItems(listdata);
listview.refreshItems();
})
}

//cell.ui.js 建立数据字段和ui组件属性之间的映射关系

var root = ui("$");// $是这个ui文件根节点组件的通配符，如果指定组件的id，也可以用id来获取对象
root.setMapping({
"photo_imageview.source" : "photo",
"name_label.text" : "name",
"price_label.text" : "price",
"checkbox.source" : "checked",
"count_label.text" : "count",
"count_label.tag" : "index"// 利用一个组件的tag属性来记录当前cell的索引
});

* 从cell.ui传递数据到index.ui：通过共享的Page对象来订阅和触发消息。cell.ui上增加货物的数量和勾选某款货物都会触发消息通知index.ui去更新数listdata数据，从而达到数据的同步，否则listview上下滑动重用的时候cell又会恢复旧的状态，关于这点可以参考文档

//index.ui.js 订阅myorder消息，定义回调函数，接受到数据后更新listdata和相应的ui

// 自定义一个myorder事件，接受从cell传递过来的数据
page.on("myorder", function(d) {
// 更新第index行的数据
var cell_data = listdata.getOne(d.index);
cell_data.checked = d.checked;
cell_data.count = d.count;
// 再更新listdata
listdata.updateOne(d.index, cell_data);
// 重新计算合计和结算数量
compute();
})

//cell.ui.js 触发myorder消息，把修改过的数据返回给index.ui

checkedLayout.on("touch", function() {
if (checkedImage.source==deviceone.checked) {
checkedImage.source = deviceone.unchecked;
} else {
checkedImage.source = deviceone.checked;
}
fireMyorder();
})

plus.on("touch", function() {
var c = count.text;
count.text = (c * 1) + 1;
fireMyorder();
});
subtract.on("touch", function() {
var c = count.text;
c = c - 1;
if (c < 0)
c = 0
count.text = c;
fireMyorder();
});
function fireMyorder() {
var d = {
"index" : count.tag,
"count" : count.text,
"checked" : checkedImage.source
};
page.fire("myorder", d);
}