dashcode：如何添加/删除列表中的项目？列表不会在视觉上刷新答案

【问题标题】：dashcode: how to add/remove items in list? List does not refresh visuallydashcode：如何添加/删除列表中的项目？列表不会在视觉上刷新
【发布时间】：2012-09-28 04:18:27
【问题描述】：

我正在开发一些小部件。它不使用任何网络服务作为数据源。我使用 jQuery 从普通网页解析一些数据，并希望将这些数据显示为 dashcode 列表。我按照 Dashcode 中的 listDataSource 示例代码进行操作。

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);
    };
}
};

在属性检查器中，我选择了动态数据类型并选择了这个 listDataSource 作为数据源。然后，我以这种方式向 listDataSource 的 _rowData 添加一项：

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

并以这种方式重新加载我的列表：

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

我知道，函数 numberOfRows 和 prepareRow 在我添加新项目后被调用（通过警报消息）。警报打印 _rowData 并按预期添加了新项目。但是我的小部件中的列表不会刷新！为什么？我实在想不通。是否有一些功能 reloadUI() 或什么？如果您现在可以解决我的问题，请让我上路。谢谢！

【问题讨论】：

标签： jquery dashcode

【解决方案1】：

我自己发现了一个丑陋的 hack。如果 reloadData() 被调用两次 - UI 中的列表会按预期刷新。

另一种解决方案是使用全局变量并在 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);
};
}
};

然后

myData.push("Item 4");

并将新的数据数组设置为列表，然后重新加载：

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

但此解决方案禁用 rowElement 上的回调函数

alert("Row "+rowIndex);

设置新dataArray后不起作用，所以我选择double reloadData hack：

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

【讨论】：