Validation des données en double entre ObservableArray

Question

J'ai un tableau observable (rempli via ajax) qui, lors de la validation, ne peut pas avoir une valeur de sélection identique sur 2 observables ou plus dans le tableau. Y a-t-il un moyen d'accomplir cela en ajoutant/supprimant du div de validation en temps réel?

Answer 1

Vous pouvez accomplir ceci avec une fonction calculée qui vérifie chaque option par rapport aux options sélectionnées dans vos AttrSViewModels. Le calcul sera automatiquement recalculé chaque fois qu'une option sélectionnée change parce qu'ils sont observables, et le texte div sera mis à jour s'il est lié à la fonction calculée.

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>