如何正確刷新使用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的列表

回答

相關問題