ObservableArrays間の重複データの検証

Question

私は、検証時に配列内の任意の2つ以上の観測値の選択値を同じにすることができない観測可能な配列（ajaxを介して作成）を持っています。

<div id="AttrValidationDiv"></div> 
    <table>  
    <!-- ko foreach: AttrsViewModels --> 
     <tr> 
      <td> 
       <select data-bind="options:$root.optionsViewModel, optionsText:'ProductName', optionsValue:'ProductId',value:ServiceGroup, optionsCaption:'Select'"></select> 
      </td> 
      </tr> 
     <!-- /ko --> 
    </table> 

これを実現する方法は、リアルタイムで検証部門に追加/削除する方法ですか？

Answer 1

これは、AttrsViewModelsの選択したオプションに対して各オプションをチェックする計算機能で実現できます。選択されたオプションがオブザーバブルであるため変更されたときは自動的に再計算され、計算された関数にバインドされている場合はdivテキストが更新されます。

function viewModel(){ 
 
    var self = this; 
 
    
 
    this.optionsViewModel = [ 
 
    { ProductId: 1, ProductName: 'product 1' }, 
 
    { ProductId: 2, ProductName: 'product 2' }, 
 
    { ProductId: 3, ProductName: 'product 3' } 
 
    ]; 
 
    
 
    this.AttrsViewModels = ko.observableArray([ 
 
    { ServiceGroup: ko.observable() }, 
 
    { ServiceGroup: ko.observable() }, 
 
    { ServiceGroup: ko.observable() } 
 
    ]); 
 
    
 
    this.validations = ko.computed(function(){ 
 
    for(var i=0; i<self.optionsViewModel.length; i++){ 
 
    \t var option = self.optionsViewModel[i]; 
 
     var matches = self.AttrsViewModels().filter(function(item){ 
 
      return item.ServiceGroup() === option.ProductId; 
 
     }); 
 
     if(matches.length >= 2){ 
 
     \t  return option.ProductName + ' is selected more than once'; 
 
     } 
 
    } 
 
    return ''; 
 
    }); 
 
} 
 
    
 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="AttrValidationDiv"> 
 
    <span data-bind="text: validations"></span> 
 
</div> 
 
<table>  
 
    <tbody> 
 
    <!--ko foreach: AttrsViewModels--> 
 
    <tr> 
 
     <td> 
 
      <select data-bind="options:$root.optionsViewModel, optionsText:'ProductName', optionsValue:'ProductId',value:ServiceGroup, optionsCaption:'Select'"></select> 
 
     </td> 
 
    </tr> 
 
    <!--/ko--> 
 
    </tbody> 
 
</table>