Question

背景：我目前正在使用Knockout的UI。我一直在使用淘汰赛一段时间，但这个问题困扰了我。我试图对一个名为Actions的可观察数组进行排序，并将其绑定到我创建的模板中的foreach。我通过创建一个调用Actions数组上的sort函数的计算机来绑定。

代码：

预期成果：我试图让数组从1-n中的每个动作中排序Order observable。我已经知道没有重复订单所以不是一个问题，我知道从1开始到n结束时，所有内容都是整数。

实际结果：当Actions为＆lt;时，一切似乎都有效。 10个动作很长。但是，一旦它是> 10订单没有像我预期的那样出现。每次加载它们时它们都以相同的顺序出现，但是该顺序不正确并且看似随机。（这意味着它似乎并没有对明显的模式进行排序。例如，按字母顺序排列）

如果有人对我为什么不工作有任何想法，我将非常感激。我以前从来没有见过这种奇怪的行为，而且完全难倒。如果您需要更多详细信息，请与我们联系。这是我的第一篇文章，所以我可能搞砸了。

谢谢，：）

Answer 1

当observable改变时，您可以使用subscribe对初始数组进行排序。

请注意，这将对每个更改进行排序，因此如果您直接批量添加一个直接添加到可观察的内容，它将会非常浪费。您应该添加到基础数组，然后调用valueHasMutated()。

如果你最终这样做了，你也可以在需要时调用数组上的sort，这样会更清楚。

＆＃13;

var viewModel = function(){
  var self = this;
  self.Actions = ko.observableArray(["one", "two", "three"]);

  self.Actions.subscribe(function() {
    console.log("sorting ...");
    self.Actions().sort();
  });
  
  // trigger sorting
  self.Actions.push("zero");
  
  self.addnew = function(){
    self.Actions.push("new" + self.Actions().length);
  }
}

ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ol data-bind="foreach: Actions">
  <li data-bind="text: $data"></li>
</ol>

<button data-bind="click: addnew">Add new</button>

＆＃13;

Knockout Observable Array意外排序

1 个答案: