gpt4 book ai didi

javascript - 验证 ObservableArray 之间的重复数据

转载 作者:行者123 更新时间:2023-12-01 02:53:45 25 4
gpt4 key购买 nike

我有一个可观察数组(通过ajax填充),在验证时,该数组中的任何2个或更多可观察值不能具有相同的选择值。

<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>

有没有办法通过实时添加/删除验证 div 来实现此目的?

最佳答案

您可以使用计算函数来完成此操作,该函数根据 AttrsViewModel 中的选定选项检查每个选项。每当选定的选项发生更改时,计算函数都会自动重新计算,因为它们是可观察的,并且如果绑定(bind)到计算函数,则 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++){
var option = self.optionsViewModel[i];
var matches = self.AttrsViewModels().filter(function(item){
return item.ServiceGroup() === option.ProductId;
});
if(matches.length >= 2){
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>

关于javascript - 验证 ObservableArray 之间的重复数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46838663/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com