在淘汰赛JS中对可观察数组进行排序 [英] Sorting Observable Array in Knockouts JS

问题描述

好吧...所以我正在使用Twitter Bootstrap.我有一个可观察的数组，它代表一组组.在用户界面中，此observableArray用于呈现每个组的选项卡"和选项卡窗格".我可以按名称属性对这些组进行排序和显示，没有问题，可以轻而易举！

Ok... so I'm using Twitter Bootstrap. I have an observable array which represents a set of groups. In the UI, this observableArray is being used to render a "tab" and "tab-pane" for each group. I can sort and display these groups by their name property, no probs, doddle right!

<ul data-bind="foreach: myArray().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 })" class="nav nav-tabs" role="tablist">
    <li data-bind="text: name"></li>
</ul>

那太好了...但是，我在同一数组中有一个全部"对象，该对象必须位于要显示的选项卡集的开头.

That's great... however, I have an 'All' object in that same array which needs to be at the beginning of the set of tabs being displayed.

标签目前看起来像这样...全部| B | C | D

Tabs currently looks like this... A | All | B | C | D

需要看起来像这样...全部| A | B | C | D

Need to look like this... All | A | B | C | D

有什么想法吗? :-/

Any ideas? :-/

推荐答案

调整排序功能.以OO方式，全部"对象将具有一个属性，指示应在顶部对其进行排序.另外，快速而肮脏的方法是将排序功能调整为以下形式:

Tweak your sort function. In OO fashion, the "All" object would have a property that indicates that it should be ordered at the top. Alternatively, the quick and dirty way to go is to tweak your sort function to something like this:

function (l, r) {
    if (l.name === "All") return 1;
    if (r.name === "All") return -1;
    return l.name().localeCompare(r.name());
}

我认为我理解了+ 1/-1逻辑，但是您已经进行了单元测试来确定这些细节，对吗? ;)

I think I got the +1/-1 logic right, but you've got unit tests to work out those details, right? ;)

作为旁注，我将使用localeCompare函数比较字符串.

As a side note, I'd use the localeCompare function to compare strings.

在@MattBurland的注释中，您也应该将排序逻辑也移到您的View模型中(无论如何都要对其进行单元测试).此外，请注意，sort会对数组本身进行排序，您也可以在可观察对象上调用sort(无需调用它来获取可观察对象的值的功能)，以对可观察对象的内容进行排序/em>.

Seconding @MattBurland's comment, you should move the sorting logic to your View Model too (this would be required anyways to unit test it). In addition, note that sort will sort the array itself, and you can also call sort on the observable (without invoking it as a function to get the observable's value), to sort the contents of the observable.

这里是这样的:

function ViewModel(items) {
  var self = this;
  self.myArray = (items);
  self.myArray.sort(function (l, r) {
      if (l.name() === "All") return -1;
      if (r.name() === "All") return 1;
      return l.name().localeCompare(r.name());
  });
};

var vm = new ViewModel([
  { name: ko.observable("B") },
  { name: ko.observable("A") },
  { name: ko.observable("All") }
]);

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="foreach: myArray" class="nav nav-tabs" role="tablist">
    <li data-bind="text: name"></li>
</ul>

或者像这样，如果您使用OO方法:

Or like this, if you use the OO approach:

function ViewModel(items) {
  var self = this;
  self.myArray = (items);
  self.myArray.sort(function (l, r) {
      if (!!l.isSpecialOption) return -1;
      if (!!r.isSpecialOption) return 1;
      return l.name().localeCompare(r.name());
  });
};

var vm = new ViewModel([
  { name: ko.observable("B") },
  { name: ko.observable("A") },
  { name: ko.observable("All"), isSpecialOption: true }
]);

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="foreach: myArray" class="nav nav-tabs" role="tablist">
    <li data-bind="text: name"></li>
</ul>

这篇关于在淘汰赛JS中对可观察数组进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！