Question

我有一个html表，每列显示一个公司，每行都有一个提供该公司的功能。

让我们说吧 A公司的功能1,2,3和8,9可选。 B公司的特色是1,3，可选7,8。公司C具有3,4个功能和9,10可选功能。

      //A  B  C
//-------------
//1  |  Y  Y  X
//2  |  Y  X  X
//3  |  Y  Y  Y
//4  |  X  X  Y
//7  |  X  O  X
//8  |  O  O  X
//9  |  O  X  O
//10 |  X  X  O

我没有显示功能5,6，因为它们在所有公司都缺失。

我希望表格显示＆＃34; fa-check＆＃34;（Y）当公司包含该功能时，＆＃34; fa-times＆＃34;（X）何时缺少并且输入类型=＆＃34;复选框＆＃34;当该功能是可选的。每个可选功能都有一个价格，因此在选中时会重新计算公司的总价

<table>
<thead>
    <tr>
        <!-- ko foreach : companies -->
        <th data-bind="text: name"></th>
        <!-- /ko -->
    </tr>
</thead>
<tbody>
    <!-- ko foreach : UnionOfFeatures-->
    <tr>
        <!-- ko foreach : companies -->
        <td data-bind="if: mandatory"><i class="fa fa-check"></i></td>
        <td data-bind="ifnot: mandatory"><input type="checkbox" data-bind="checked: Checked"></td>
        @*<td data-bind="when is Missing"><i class="fa fa-times"></i></td>*@  
        <!-- /ko -->
    </tr>
    <!-- /ko -->
</tbody>

<script type="text/javascript">
function feature(id, mandatory) {
    var self = this;
    self.id = id;
    self.mandatory = ko.observable(mandatory);
}

function company(name, features) {
    var self = this;
    self.name = name;
    self.features = ko.observableArray(features);
}

var viewModel = function () {
    self.companies = ko.observableArray(
    [
      new company("Company 1", [
           new feature(1, true),
           new feature(2, true),
           new feature(3, true),
           new feature(8, false),
           new feature(9, false)
      ]),

      new company("Company 2", [
           new feature(1, true),
           new feature(3, true),
           new feature(7, false),
           new feature(8, false)
      ]),

      new company("Company 3", [
           new feature(3, true),
           new feature(4, true),
           new feature(9, false),
           new feature(10, false)
      ]),
    ]);


    self.UnionFeaturesIds = ko.computed(function () {   
        return 0; //????;
    });
}

ko.applyBindings(new viewModel());

Answer 1

您在viewModel中缺少var self = this。

我已经快速玩了这个，我决定以稍微不同的方式做到这一点。随意更改我的任何代码，我只是玩得开心; p

我已经制作了一系列所有功能，我可以随时参考。然后我在每个公司内部创建了一个新的辅助逻辑，它将遍历所有功能。

如果找到给定的特征，则添加它，否则我们创建一个虚拟对象，我们知道这是一个缺失的特征（我添加了-1的ID）

var allFeatures = ko.observableArray();

function feature(id, mandatory) {
  var self = this;
  self.id = id;
  self.mandatory = ko.observable(mandatory);
}

function company(name, features) {
  var self = this;
  self.name = name;
  self.features = ko.observableArray(features);
}

var viewModel = function() {
  var self = this;
  self.companies = ko.observableArray(
    [

      new company("Company 1", [
        new feature(1, true),
        new feature(2, true),
        new feature(3, true),
        new feature(8, false),
        new feature(9, false)
      ]),

      new company("Company 2", [
        new feature(1, true),
        new feature(3, true),
        new feature(7, false),
        new feature(8, false)
      ]),

      new company("Company 3", [
        new feature(3, true),
        new feature(4, true),
        new feature(9, false),
        new feature(10, false)
      ])
    ]);
  self.setFeatures = function(features) {
    var featuresToChange = features;
    var tempFeatures = [];
    // loop through all features, so we can create all rows in the HTML
    for (var i = 0; i < allFeatures().length; i++) {
      var currentFeature = featuresToChange()[i];

      // see if current feature exists in a given company
      var featureWithIdFound = ko.utils.arrayFirst(featuresToChange(), function(item) {
        return item.id === allFeatures()[i];
      });

      // if the feature was found, and we are currently looping through its ID, push it to temporary array
      if (featureWithIdFound !== null && featureWithIdFound.id === allFeatures()[i]) {
        tempFeatures.push(featureWithIdFound);
      } else {
        // otherwise push a feature that's missing, by giving it's negative ID
        tempFeatures.push(new feature(-1));
      }
    }
    // push to existing features array in that company
    featuresToChange(tempFeatures);
  }
  self.createAllFeaturesList = function() {
    var _allFeatures = [];
    // loop through all companies to get unique features
    for (var i = 0; i < self.companies().length; i++) {
      var curCompany = self.companies()[i];
      // push all unique items to temporary array called _allFeatures
      ko.utils.arrayFirst(curCompany.features(), function(item) {
        if (_allFeatures.indexOf(item.id) < 0 && item.id !== -1) {
          // only push items that don't exist in the array, so we don't end up with duplicated
          _allFeatures.push(item.id);
        }
      });
    }
    // sort IDs
    _allFeatures.sort(function(a, b) {
      return a > b ? 1 : -1
    });
    allFeatures(_allFeatures);

    ko.utils.arrayForEach(self.companies(), function(item) {
      // apply them to table
      self.setFeatures(item.features);
    });
  };
  // instantiate features
  self.createAllFeaturesList();
}



ko.applyBindings(new viewModel());

.fa-check {
  color: green;
}
.fa-times {
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table>
  <thead>
    <tr data-bind="foreach: companies">
      <th data-bind="text: name"></th>
    </tr>
  </thead>
  <tbody>
    <tr data-bind="foreach: companies">
      <td>
        <table>
          <tbody data-bind="foreach: features">
            <tr>
              <td>
                <i class="fa fa-check" data-bind="visible: mandatory"></i>
                <input type="checkbox" data-bind="visible: !mandatory() && id > 0"/>
                <i class="fa fa-times" data-bind="visible: id < 0"></i>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

我希望这会有所帮助。

显示比较表

1 个答案: