购物车的简单示例

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