使用<select>进行淘汰排序

Question

我目前使用Knockout进行排序实现，其中每列都是用户可以单击以按该列对ObservableArray进行排序的列。我想把它转换成一个，我关闭 - 选择我创建的Sort中的一个列确实调用了sort函数，但是没有传递属性来排序那个排序函数就像最初的实现确实如此。我尝试过像＃34; sort（sortType）＆＃34;明确地传递我想要排序的属性，但是这不起作用/原始实现不需要这样的事情。 原始排序代码： ＆lt; div data-bind =＆＃34; foreach：headers＆＃34;类=＆＃34;头＆＃34;＆GT;   ＆lt; span data-bind =＆＃34;点击：$ parent.sort，text：title＆＃34;＆gt;＆lt; / span＆gt; ＆LT; / DIV＆GT; 选择排序代码： ＆lt; select data-bind =＆＃34; event：{change：sort}，options：headers，optionsText：＆＃39; title＆＃39;，optionsValue：＆＃39; sortType＆＃39;＆＃34;＆gt; ＆LT; /选择＆GT; 这是小提琴

Answer 1

您必须使用value绑定而不是change事件：

<select data-bind="value: sortMode, 
                   options: headers, 
                   optionsText: 'title'"></select>

然后，在您的viewmodel中，您可以订阅sortMode：

var self = this;
this.sortMode = ko.observable("title");              
this.sort = function() {
  var sortProperty = self.sortMode();

  // Logic to sort by `sortProperty` goes here:
  // ...
};

this.sortMode.subscribe(this.sort);

针对您的特定代码/案例

点击此处查看我的建议：https://jsfiddle.net/u8tLLrLb/

查看代码，我建议使self.activeSort成为可观察的，引入名为pureComputed的{​​{1}}属性和名为{{1}的sortMethod数组}：

pureComputed

然后，sortedMovies的数据绑定将是：

self.activeSort = ko.observable(self.headers[0]);
self.sortMethod = ko.pureComputed(function() {
  var sortType = self.activeSort().sortType;
  switch (sortType) { /* return a function(a,b) { } */ }
});

self.sortedMovies = ko.pureComputed(function() {
  return self.movies().sort(self.sortMethod());
});

更改此设置将更新<select>，这将更新<select data-bind="value: activeSort, options: headers, optionsText: 'title'"></select> 。