Question

我正在使用knockout js来创建一个简单的复选框过滤器，但我现在处于一个可以帮助的地方，如下所示。 VIEW

<table style="float: left;margin-right: 200px;">
  <tbody data-bind="foreach: plants">
    <tr>
        <td data-bind="text: plant"></td>
        <td> <input type="checkbox" data-bind="checked: is_checked, value: plant, event: { change: $root.filterJobs }"></td>    
    </tr>
  </tbody>
</table>


<table>
  <tbody data-bind="foreach: jobs">
    <tr data-bind="visible: visible">
        <td data-bind="text: plant"></td>
        <td data-bind="text: tested"></td>  
    </tr>
  </tbody>
</table>

MODEL

  function viewModel() {

  var root = this;
  root.plants = ko.observableArray([{'plant' : '1-1', 'is_checked': true}, {'plant' : '1-2', 'is_checked': true},{'plant' : '1-3', 'is_checked': true},{'plant' : '1-4', 'is_checked': true},{'plant' : '1-5', 'is_checked': true},{'plant' : '1-6', 'is_checked': true},{'plant' : '1-7', 'is_checked': true},{'plant' : '1-8', 'is_checked': true},{'plant' : '1-9', 'is_checked': true}]);

  root.jobs = ko.observableArray([{'plant' : '1-1', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-1', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-2', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-2', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-3', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-3', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-4', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-4', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-5', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-5', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-6', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-6', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-7', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-7', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-8', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-8', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-9', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-9', 'tested' : 'Monday', 'visible' : true}]);

  root.filterJobs = function() {
    var self = this;    
    var plant = self.plant;
    var is_checked =  self.is_checked;
    console.log(plant, is_checked);

    if(is_checked){
        //how do i pass the plant the plant and visible(true) to the jobs loop
        root.jobs.visible(true)
    }
    else {
        //how do i pass the plant the plant and visible(false) to the jobs loop
        root.jobs.visible(false);
    }
  }
  }

  ko.applyBindings(new viewModel());

我需要更新作业循环以使可见为假或为真取决于是否选中了复选框，工厂循环中的工厂与作业循环中的工厂相同，conole.log正在通过工厂如果选中复选框，则为值和true / false

谢谢

Answer 1

我已经更新了你的viewModel代码，我觉得它运行正常。

  function viewModel() {

  var root = this;
  root.plants = ko.observableArray([{'plant' : '1-1', 'is_checked': true}, {'plant' : '1-2', 'is_checked': true},{'plant' : '1-3', 'is_checked': true},{'plant' : '1-4', 'is_checked': true},{'plant' : '1-5', 'is_checked': true},{'plant' : '1-6', 'is_checked': true},{'plant' : '1-7', 'is_checked': true},{'plant' : '1-8', 'is_checked': true},{'plant' : '1-9', 'is_checked': true}]);

  root.jobs = ko.observableArray([{'plant' : '1-1', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-1', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-2', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-2', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-3', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-3', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-4', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-4', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-5', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-5', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-6', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-6', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-7', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-7', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-8', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-8', 'tested' : 'Monday', 'visible' : true},{'plant' : '1-9', 'tested' : 'Wednesday', 'visible' : true},{'plant' : '1-9', 'tested' : 'Monday', 'visible' : true}]);

  root.filterJobs = function() {
    var self = this;    
    var plant = self.plant;
    var is_checked =  self.is_checked;
    console.log(plant, is_checked);

                   if (root.jobs !== undefined) {
                       return ko.utils.arrayFilter(root.jobs, function (item) {
                           if (item.visible) {
                               return true;
                           }
                           else {
                              return false;
                           }
                       });
                   }

  }
  }

  ko.applyBindings(new viewModel());

使用可见的knockout js复选框过滤器

1 个答案: