A simple example of a shopping cart

"Code Analysis"
The UI file in which the ListView is located is Source://view/index.ui, and the UI file where the template cell resides is Source://view/cell.ui, all 2 files on a page, but in a different closure environment.


* Data sharing: Can be shared through the global variables of the JS environment, but it is not recommended to use the variable declaration without VAR, you can use deviceone this sharing area
Index.ui.js Defining variables

// define 2 Global variables deviceone.checked = "Source://view/checked.png"= "Source://view/unchecked.png";

Cell.ui.js Using variables

function () {        if (checkedimage.source==deviceone.checked) {                = deviceone.unchecked;         Else  {                = deviceone.checked;        }        Firemyorder ();})

* Transfer data from Index.ui to Cell.ui: This way is a more common example of the ListView people looking through the data bind way
Index.ui.js get data, bind data

var json_path = "Data://do_listview/cars.json"; // Locally cached Data if (Storage.fileexist (Json_path)) {        function(data, E) {                //  Deviceone.print (json.stringify (data));                 listdata.adddata (data);                Listview.binditems (listdata);                Listview.refreshitems ();        })}

Cell.ui.js establishing a mapping relationship between data fields and UI component properties

var root = UI ("$");; // $ is a wildcard for the root node component of this UI file, and if you specify the ID of the component, you can also use the ID to get the object 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 "//  Use the Tag property of a component to record the index of the current cell });

* Transfer data from Cell.ui to Index.ui: Subscribe to and trigger messages with shared Page objects. Increase the number of goods on the cell.ui and tick a certain goods will trigger the message notification Index.ui to update the number of Listdata data, so as to achieve the synchronization of data, or the ListView up and down sliding reuse cell will restore the old state, about this can refer to the document


Index.ui.js Subscribe to Myorder messages, define callback functions, update listdata and corresponding UI after receiving data

 //  Customize a Myorder event to accept data passed from the cell  Page.On ("Myorder", function   (d) { //  update data for index row  var  cell_data =< Span style= "color: #000000;"        > Listdata.getone (D.index);        cell_data.checked  = d.checked;        Cell_data.count  = D.count;  //  re-update listdata   Listdata.updateone (D.index, cell_data);  //  recalculate totals and settlements quantity   compute ();})  

Cell.ui.js triggers a myorder message to return the modified data to 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() {        varc =Count.text; Count.text= (c * 1) + 1; Firemyorder ();}); Subtract.on ("Touch",function() {        varc =Count.text; C= C-1; if(C < 0) C= 0Count.text=C; Firemyorder ();}); functionFiremyorder () {varD = {                "Index": Count.tag,"Count": Count.text,"Checked": Checkedimage.source}; Page.fire ("Myorder", D);}

A simple example of a shopping cart