推送后对淘汰赛 observableArray 进行排序答案

【问题标题】：Sorting Knockout observableArray after push推送后对淘汰赛 observableArray 进行排序
【发布时间】：2016-02-23 18:30:44
【问题描述】：

下面的代码大部分都有效。问题是，如果我从右框中删除一个项目并添加到左框中（反之亦然），那么列表不会按字母顺序排序。

我尝试了sort() 函数。例如，self.catagories.sort()，但它不起作用。它总是在最后添加项目。我需要有关此解决方案的帮助。

var categoryModel = function(category) {
    this.category = ko.observable(category);
    };

 var viewModel=function(){
 var self=this;
     self.categories=ko.observableArray([new categoryModel("Hello"),new categoryModel("DHFDSHADS"),new categoryModel("yo"),new categoryModel("jai")]);

     self.selectedCategory=ko.observableArray();


 $('#add').click(function() {  
   var x= $('#select1 option:selected');
   if(x.length>0){
       x.each(function(){
           alert($(this).text());
        self.selectedCategory.push(new categoryModel($(this).text()));
        $('#select1 option:selected').remove();
       });
   }
});

 $('#remove').click(function() {  
  var x= $('#select2 option:selected');
   if(x.length>0){
       x.each(function(){
           alert($(this).text());
        self.categories.push(new categoryModel($(this).text()));
        $('#select2 option:selected').remove();
       });
   } 
 }); 

 };


$(document).ready(function() {  
  ko.applyBindings(new viewModel());

});

.liveExample select[multiple] { width: 20%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div class='liveExample'> 
    <p>Your items:</p>
    <select multiple="multiple" id ="select1" width="5" data-bind="options: categories,optionsText:'category'"> </select> 

   <span> 
       <a href="#" id="add"> >> </a>
       <a href="#" id="remove"> << </a>    
    </span>

     <select multiple="multiple" id ="select2" width="5" data-bind="options: selectedCategory,optionsText:'category'"> </select> 
</div>

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

您是在与 KO 战斗，而不是使用它。 IE。您正在从 DOM 中删除选项，而不是从 observableArrays 中删除它们，并且您正在使用 jQuery 而不是 KO 点击绑定来处理点击。如果您更改这些内容，您当前的症状很可能会消失。我建议浏览 KO 教程。

无论如何，这就是我将如何解决您的问题：

var categoryModel = function(category) {
  this.category = ko.observable(category);
};

var viewModel = function() {
  var self = this;

  self.availableCategories = ko.observableArray([
    new categoryModel("Hello"),
    new categoryModel("DHFDSHADS"),
    new categoryModel("yo"),
    new categoryModel("jai")
  ]);
  self.usedCategories = ko.observableArray([]);
  self.selectedAvailableCategories = ko.observableArray([]);
  self.selectedUsedCategories = ko.observableArray([]);
  
  self.add = function() {
    self.selectedAvailableCategories().forEach(function(i) {
      self.availableCategories.remove(i);
      self.usedCategories.push(i);
    });
  };

  self.remove = function() {
    self.selectedUsedCategories().forEach(function(i) {
      self.usedCategories.remove(i);
      self.availableCategories.push(i);
    });
  };
};

ko.applyBindings(new viewModel());

pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; }
select { width: 200px; }
a { display: inline-block; margin: 10px; cursor: pointer; border: 1px solid gold; padding: 5px 10px; text-decoration: none; }
a:hover { background-color: pink; }

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

<select multiple="multiple" width="5" data-bind="options: availableCategories, optionsText: 'category', selectedOptions: selectedAvailableCategories"></select>
<span> 
  <a href="#" data-bind="click: add"> &rarr; </a>
  <a href="#" data-bind="click: remove"> &larr; </a>    
</span>
<select multiple="multiple" width="5" data-bind="options: usedCategories, optionsText:'category', selectedOptions: selectedUsedCategories"></select>

【讨论】：