UI5 删除重复的提要列表项

Question

我有一个用于在我的 UI5 xml 视图中发布 cmets 的 Feed 列表

<layout:content>
    <m:FeedInput post="onFeedPost" class="sapUiSmallMarginTopBottom"/>
    <m:List id="feedList" showSeparators="Inner" items="{path: '/table', sorter: {path: 'DATE', descending: true}}">
        <m:FeedListItem sender="{MEMBERID}" timestamp="{DATE}" text="{COMMENT}" convertLinksToAnchorTags="All"/>
    </m:List>
</layout:content>

我不想显示具有相同文本和日期的重复 cmets，而是将它们保存在数据库中。我的想法是在控制器中迭代项目以执行此操作，但我不确定如何处理生成的数组

var results = [];
var comments = feed.getItems();

for (var n = 0; n < comments.length - 1; n++) {
    var contained = false; 

    for (var m = n + 1; m < comments.length; m++) {
        if (comments[n].getText() === comments[m].getText() && 
            comments[n].getDate() === comments[m].getDate()) {
            comments.pop(m);

            contained = true;

            if (!results.includes(comments[n])) {
                results.push(comments[n]);
            }
        }
    }

    if (!contained && !results.includes(comments[n])) {
        results.push(comments[n]);
    }
}

// replace list items with results array

我不知道如何用新数组替换提要列表的项目，因为有一个 getItems 函数但没有一个 setItems 函数。在我看来，可能有一种更简单更惯用的 UI5 方式来做到这一点，但我还没有找到。

Answer 1

首先，处理这种情况的正确方法是在 OData 服务中。服务应在将数据发送到客户端之前删除重复项。但是，如果我们假设您无法在服务器端执行此操作，那么您有一些选择。

1.) 不要将列表项绑定到任何东西。相反，使用 ODataModel 读取数据，然后过滤掉重复项，创建一个新列表项并将其添加到列表中

使用 ODataModel 读取数据，然后将结果传递给一个方法，该方法将过滤并将它们添加到列表中

oModel.read("/EntitySet", {
    success: function(oResponse) {
        this._addCommentsToList(oResponse.results)
    }.bind(this)
})

在处理结果的方法中，您需要做三件事——创建一个新的 FeedListItem，设置列表项的绑定上下文，然后将列表项添加到列表中

var aDistinctComments = //use your logic to filter out duplicates
aDistinctComments.forEach(function(oComment) {
    //to set the binding context, you'll need the entity key/path
    var sCommentKey = oModel.createKey("/EntitySet", oComment)
    //create a new binding context
    var oContext = oModel.createBindingContext(sCommentKey)
    //create a new FeedListItem
    var oItem = new FeedListItem({
        sender: "{MemberId}",
        ...
    });
    //set the context of the item and add it to the list
    oItem.setBindingContext(oContext);
    oList.addItem(oItem);
})

2.) 将列表直接绑定到 OData 实体集，然后当列表接收到数据时，遍历项目并隐藏重复项

<List items="{/EntitySet}" updateFinished="onListUpdateFinished"....>

----- onListUpdateFinished ---
var aItems = oList.getItems();
for (var m = n + 1; m < aItems.length; m++) {
    //set a boolean, true if duplicate
    var bDuplicate = aItems[m].getText() ==== aItems[n].getText() &&
                     aItems[m].getDate() === aItems[n].getDate();
    //set the visibility of the item to true if it is not a duplicate
    aItems[m].setVisible(!bDuplicate)
}

3.) 手动读取数据，删除重复数据，并将其存储在 JSON 模型中，并将表绑定到您的 JSON 模型路径

oModel.read("/EntitySet", {
    success: function(oResponse) {
        this._addCommentsToJSONModel(oResponse.results)
    }.bind(this)
})

您可以在 JSON 模型中存储一组对象，然后将表项绑定到该路径

 var aDistinctComments = // your logic to get distinct comments
 oJSONModel.setProperty("/comments", aDistinctComments)
 oList.setModel(oJSONModel);

 -----

 <List items="{/comments"}....>

4.) 将您的列表项绑定到您的实体集，迭代这些项，然后从列表中删除重复项。我不推荐这种方法。从绑定到实体集的列表中手动删除项目可能会导致重复 ID 的问题。

 var oItem = //use your logic to find a duplicate list item
 oList.removeItem(oItem)

我建议首先在 OData 服务中处理此服务器端，如果这不是一个选项，则使用上面的选项 1。这将为您提供所需的结果并维护列表项的绑定上下文。选项 2 和 3 将为您提供所需的结果，但根据您的应用程序，可能会使处理列表变得更加困难。

Answer 2

这是一种方法：

不要直接将列表绑定到您的 oData。 您可以创建一个 JSON 模型，该模型将是删除重复项后的结果模型。

将 JSON 模型绑定到 List，如下所示：

var oList = this.getView().byId("feedList"); oList.bindAggregation("items", "pathToJsonArray", template);

（本例中模板为 feedlistitem）。