如何为qx.ui.list.List添加与移除列表项？

核心要点 #

你之前的误区是直接操作List组件，而Qooxdoo的List是数据驱动的，所有列表项的增删都要通过绑定的qx.data.Array模型来操作，而非List实例本身。qx.data.marshal.Json.createModel处理数组时，返回的正是qx.data.Array对象，它提供了专门的数组操作方法。

1. 向数组末尾添加列表项 #

直接调用模型的push()方法即可，List会自动同步更新视图：

var rawData = [];
for (var i = 0; i < 2; i++) {
 rawData[i] = "Item " + i;
}
var model = qx.data.marshal.Json.createModel(rawData);

var list = new qx.ui.list.List(model);
this.getRoot().add(list);

// 向末尾添加新项，视图自动刷新
model.push("Item 2");

2. 移除列表中的元素 #

根据需求选择以下方法：

• 移除指定索引的元素：使用removeAt(index)

// 移除第一个列表项（索引为0）
model.removeAt(0);

• 移除指定值的元素：使用remove(value)

// 移除值为"Item 1"的列表项
model.remove("Item 1");

• 清空所有元素：使用removeAll()

model.removeAll();

关于无效尝试的说明 #

你之前写的list.add()、list.createItem()等方法，是针对普通容器组件（如qx.ui.container.Composite）的操作逻辑，但List是基于数据模型动态渲染的组件，它的列表项由模型生成，直接操作组件既不会同步到数据模型，也无法更新视图。

内容的提问来源于stack exchange，提问作者Lex