购物车的简单示例

【代码分析】
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);
}