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

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

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

来源

2016-04-26 T. Frick

后，这个问题太大故障，我终于一起砍死一个解决方案，但它的效果并不理想。

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

选择列表1个
订单列表，只要你想尽可能多。
选择列表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的经验来妥善解决这个问题。

来源

2016-04-28 19:04:01

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

回答

相关问题