Question

我有一个报告页面，我不希望页面刷新。在选择列表更改时，我调用API来生成新报告，并使用List.js将其吐出到DOM。我遇到的问题是：只有加载的第一个报告才能正常使用排序功能。我相信问题的核心是我如何“刷新”清单。这是代码：

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.
要复制：

选择列表1
根据需要订购列表。
选择列表2
按任一列顺序排列列表（有效）。
再次按同一列排序列表（不起作用）。

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

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

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

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

列表签名的更改

现有

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

已更改为

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

对init的更改

现有

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

已更改为

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

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

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

1 个答案: