Question

以下代码主要有用。问题是，如果我从右侧框中删除一个项目并添加到左侧框中（反之亦然），则列表不按字母顺序排序。

我尝试使用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>

Answer 1

你正在与KO战斗，而不是使用它。即您正在从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>

推送后对Knockout observableArray进行排序

1 个答案: