你的位置:首页 > Java教程

[Java教程]购物车的简单示例



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