如何使用 List.js 正确刷新列表

Question

我有一个不希望页面刷新的报告页面。在 select 列表更改时，我调用 API 生成新报告并使用 List.js 将其发送到 DOM。我运行遇到的问题是：只有第一个加载的报告才能正确使用排序功能。我认为问题的核心是我如何 'refreshing' 上榜。这是代码：

function initializeReport(videoName) {
    if (videoName) {
        $.ajax({
            url: '/api/report/' + videoName,
            type: "GET",
            dataType: "json",
            success: function (data) {
                var values = [];
                var countWatched = 0;
                data.forEach(function (entry) {
                    values.push({ name: entry.UserName, title: entry.Title, count: entry.Count, time_played: entry.TimePlayed })
                    if (entry.TimePlayed > 0) {
                        countWatched++;
                    }
                });
                var options = {
                    valueNames: ['name', 'title', 'time_played', 'count'],
                    item: '<li><div class="name"></div><div class="title"></div><div class="time_played"></div><div class="count"></div></li>'
                };
                var userList = new List('views', options);
                userList.remove();
                userList.add(values);
            }
        });
    }
}

编辑这是 jsfiddle

Answer 1

在对这个问题进行了大量的排查之后，我终于找到了一个解决方案，但它并不理想。

Here is the js fiddle to replicate the issue.
要复制：

Select 列表 1
列表随心所欲。
Select 列表 2
按任一列对列表进行一次排序（有效）。
再次按同一列对列表进行排序（不起作用）。

从 List.js documentation 看来，除了 new List("id", options) 之外没有其他选择现有列表的方法。因此，我的代码每次更改列表的值时都会创建一个 List 的新实例。这似乎是问题所在。当我深入研究 list.js 文件中的 init 函数时，我注意到这一行：

self.sort = require('./src/sort')(self);

如果您将日志记录添加到 './src/sort' 功能，您会注意到每次使用给定代码更改列表然后尝试排序时，排序功能都会以乘法方式调用。本质上，列表的每一次偶数更改都是调用排序功能偶数次，这将自行撤消。

没有足够强大的 javascript 背景来真正解决这个问题，我最终想出了一个解决方案。我更改了列表的构造函数。相关代码如下：

更改列表签名

现有

        var List = function (id, options, values) {

改为

        var List = function (id, options, rebuildSort, values) {

对初始化的更改

现有

                    self.sort = require('./src/sort')(self);

改为

                    if (rebuildSort) {
                        self.sort = require('./src/sort')(self);
                    }

从这里，您可以告诉构造函数您是否要重建排序功能。我只在第一次调用时执行此操作，因此排序功能只会调用一次。我知道这不是理想的修复方法，但正如我所说，我没有正确修复此问题的 js 经验。

如何使用 List.js 正确刷新列表

How do you properly refresh a list using List.js

javascript

jquery

frontend

web