Question

我按照本教程创建了可排序表 http://kindohm.com/posts/2013/08/21/knockout-sortable-tables/

当我有一个observablArray，其元素对应于表的列时，它非常适用。但是，我有一个observableArray（rank），其元素是游戏（例如rank.soccer），它们本身应该是表格。所以，这是我的代码的本质。

self.rank = ko.observableArray();

//Then I use publicGet to do an html request and pull json data into the observable array

self.sortBy_soccer_teamName = function(){
        self.rank().soccer.sort(function(a, b){
            if (a.teamName > b.teamName) return 1;
            if (a.teamName < b.teamName) return -1;
            return 0;
        });
    };


<table style="width: 100%">
  <thead>
  <th><a href="#" data-bind="click: sortBy_soccer_placing">Rank</a></th>
  <th><a href="#" data-bind="click: sortBy_soccer_teamName">Team</a></th>
  <th><a href="#" data-bind="click: sortBy_soccer_matchWins">Match Wins</a></th>
  <th><a href="#" data-bind="click: sortBy_soccer_matchLosses">Match Losses</a></th>
  <th><a href="#" data-bind="click: sortBy_soccer_winPercent">Win Percent</a></th>
  <th><a href="#" data-bind="click: sortBy_soccer_gamesBack">Games Back</a></th>

  <tbody data-bind="foreach: rank().soccer">
   <tr>
      <td data-bind="text: placing"></td>
      <td data-bind="text: teamName"></td>
      <td data-bind="text: matchWins"></td>
      <td data-bind="text: matchLosses"></td>
      <td data-bind="text: winPercent"></td>
      <td data-bind="text: gamesBack"></td>
   </tr>
  </tbody>
</thead>

Json看起来像：

{
  name: "TeamRank"
  soccer: [20]
  0:  {
      teamId: 47
      teamName: "pandas"
      matchWins: 10
      matchLosses: 0
      winPercent: 100
      gamesBack: 0
      }
  -1: {
      ...
      }
  football: [20]
  O:  { 
      ....
  }
}

为了制作表格，我做了一个数据绑定foreach rank（）。soccer 该表显示正常，但我无法对数据进行排序，排序功能对表格没有任何作用，并且html没有任何问题。它绝对只是排序函数。

因此。有人如何在observableArray中对列表进行排序？

由于

Answer 1

根据我的理解，rank是一个observableArray，soccer是排名中每个项目的数组。你想要对足球进行排序。

在将json数据放入self.rank之前，请为每个足球创建observableArray。这样，只要你改变足球的顺序并且相应地显示结果，Knockout就会接受改变。

Answer 2

你可以试试这个：

self.rank = ko.observableArray();

self.rank().sort(function(l, r)
{
  return (l.teamName == r.teamName) ? (l.teamName > r.teamName ? 1 : -1) : (l.teamName > r.teamName ? 1 : -1);
});

Knockout.js在Observable Array中排序数组

2 个答案: