dashcode: how to add/remove items in list? List does not refresh visually

Question

I'm working on some widget. It doesn't use any web service for data source. I parse some data using jQuery from a normal web page, and want to display this data as a dashcode list. I followed the listDataSource sample code in Dashcode.

var listDataSource = {
  _rowData: ['Item 1', 'Item 2', 'Item 3'],
  numberOfRows: function() {
      alert("Row data now is: "+this._rowData);
      alert("number of rows: "+this._rowData.length);
      return this._rowData.length;
},
prepareRow: function(rowElement, rowIndex, templateElements) {
    if (templateElements.rowLabel) {
        templateElements.rowLabel.innerText = this._rowData[rowIndex];
    }
    rowElement.ondblclick = function(event) {
        // Do something interesting
        alert("Row "+rowIndex);
    };
}
};

In attributes inspenctor I selected Dynamic Data Type and chosen this listDataSource as Data Source. Then, I add one more item to listDataSource's _rowData this way:

listDataSource._rowData.push("New Item 4");

and reload my list this way:

var mylist = document.getElementById("list").object;    
mylist.reloadData();

I know, that functions numberOfRows and prepareRow gets called after I add new item, (by alert messages). Alert prints _rowData with new item added as expected. But a list in my widget do not refresh! Why? I really can't figure it out. Is there some function reloadUI() or something? Please, put me on the way if you now the solution for my problem. Thanks!

Answer 1

Found an ugly hack by myself. if reloadData() is called twice - list in UI refreshes as expected.

Another solution is to use global var and set it just before reloadData()

var myData['Item 1', 'Item 2', 'Item 3'];

var listDataSource = {
  _rowData: myData,
  numberOfRows: function() {
  alert("Row data now is: "+this._rowData);
  alert("number of rows: "+this._rowData.length);
  return this._rowData.length;
},
prepareRow: function(rowElement, rowIndex, templateElements) {
if (templateElements.rowLabel) {
    templateElements.rowLabel.innerText = this._rowData[rowIndex];
}
rowElement.ondblclick = function(event) {
    // Do something interesting
    alert("Row "+rowIndex);
};
}
};

then

myData.push("Item 4");

and set new data array to list and then reload it:

var mylist = document.getElementById("list").object;    
mylist.setDataArray(myData);
mylist.reloadData();

but this solution disables callback function on rowElement

alert("Row "+rowIndex);

doesn't work after setting new dataArray, so I choose double reloadData hack:

var mylist = document.getElementById("list").object;    
mylist.reloadData();
mylist.reloadData();