select 上的复选框验证

Question

我有以下内容：

                    <tbody data-bind="foreach: { data: MenuItems, as: 'tableitem' }">
                    <tr>
                        <td data-bind="html: tableitem.label"></td>
                        <td>
                            <select class="form-control" data-bind="options: $root.GroupedScorecardTypes,
                        optionsText: 'Name', optionsValue: 'Id', value: tableitem.clean"></select>
                        </td>
                        <td>
                            <select class="form-control" data-bind="options: $root.GroupedScorecardTypes,
                        optionsText: 'Name', optionsValue: 'Id', value: tableitem.copy"></select>
                        </td>
                    </tr>
                </tbody>

显示以下内容：每个选项的下拉菜单中都有三个选项。它们是：All data、Target Data 和 Ignore。现在，当用户单击填充目标列上的 All data 或 Target Data 时，该行的清理目标列应更改为 Target Data。我尝试了以下但似乎没有用：

        self.MenuItems().forEach(function(data){
            
            if (data.copy == 2 || data.copy == 1){
                data.clean == 2
            }
            console.table(data);
        });

我需要它立即改变，知道我该怎么做吗？我的数据如下所示：

            var data = unique.map(function (item) {
            return {
                'label': item,
                'clean': DefaultItem,
                'copy': DefaultItem
            };
        });
            if (self.isSaved !== 1) {
            self.MenuItems(data);  

        }

Answer 1

我认为您可以利用订阅 Observable 的优势。类似于以下内容。

var serverData = [{
  label: 'test1',
  clean: null,
  copy: null
},{
  label: 'test2',
  clean: null,
  copy: null
},{
  label: 'test3',
  clean: null,
  copy: null
}];


function MenuItem(data) {
  var self = this;
  self.label = ko.observable(data.label || '');
  self.clean = ko.observable(data.clean || null);
  self.copy = ko.observable(data.copy || null);

  var subscription = self.copy.subscribe(function(newValue) {
    self.clean(newValue);
  });
  
  self.disposeSubscription = function dispose(){
    subscription.dispose();
  }
}

function ViewModel() {
  var self = this;
  self.MenuItems = ko.observableArray();

  self.GroupedScorecardTypes = ko.observableArray([{
      Id: 1,
      Name: 'Ignore'
    },
    {
      Id: 2,
      Name: 'Target Data'
    },
    {
      Id: 3,
      Name: 'All Data'
    },
  ]);
  
  var mappedData = serverData.map(x => new MenuItem(x));
  self.MenuItems(mappedData);
  
}

ko.applyBindings(new ViewModel());

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-striped ">
  <thead class="thead-dark">
    <tr>
      <th></th>
      <th>Clean Target</th>
      <th>Populate Target</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: { data: MenuItems, as: 'tableitem' }">
    <tr>
      <td data-bind="html: tableitem.label"></td>
      <td>
        <select class="form-control" data-bind="options: $root.GroupedScorecardTypes,
                        optionsText: 'Name', optionsValue: 'Id', value: tableitem.clean"></select>
      </td>
      <td>
        <select class="form-control" data-bind="options: $root.GroupedScorecardTypes,
                        optionsText: 'Name', optionsValue: 'Id', value: tableitem.copy"></select>
      </td>
    </tr>
  </tbody>
</table>

select 上的复选框验证

Checkbox validation on select

knockout.js

knockout-validation