javascript - 使用 knockout 渲染并排比较

Question

我正在做一个项目，我希望能够并排显示多个项目以进行比较。

我希望以类似于亚马逊的方式显示比较，每个项目都由一个垂直列表示，该列中包含有关该项目的所有信息:

我目前正在使用 Knockout，并且有一个包含我想要比较的项目的 Observable 数组。我想使用 foreach 绑定(bind)来完成这项工作，我的问题源于这样一个事实，即表的特定行的所有单元格都包含在同一元素中，这使得它难以使用:

<tr>
  <td>Rating</td>
  <td> 4.5 (data from item 1)</td>
  <td> 3.5 (data from item 2)</td>
</tr>
<tr>
  <td>price</td>
  <td>$2.3 (data from item 1) </td>
  <td>$3.5 (data from item 2) </td>
</td>

如果我希望每个项目都包含在一行中，这将不是问题。由于不同项目的数据必须存在于文档的不同(重叠)部分，因此任何人都对如何解决此问题有任何建议。

Answer 1

我有个坏消息要告诉你。 Html 表格严格按行排序，这种数据布局可能有点令人沮丧。

基本上，您有两个选择:

选项 A:转置您的数据

您可以为“特征比较”引入一个特定的 View 模型并将您的数据转换为该 View 模型。然后，您可以在 tbody 上执行 foreach 迭代这些“featureComparisons”。在代码中，这就是我的意思:

var inputData = [
  { name: "First product", rating: 4.5, price: "$3.50", color: "Gray" },
  { name: "Another product", rating: 3.5, price: "$2.95", color: "Yellow" }
];

function FeatComparison(comparisonName, comparedValues) {
  this.comparisonName = comparisonName;
  this.comparedValues = comparedValues;
}

var vm = { comparisons: ko.observableArray([]) };

// You could also explicitly send a list of comparable properties from back-end.
// For this example we iterate the first product.
for (var prop in inputData[0]) {
  if (inputData[0].hasOwnProperty(prop)) {
    var vals = inputData.map(function(i) { return i[prop]; });
    vm.comparisons.push(new FeatComparison(prop, vals));
  }
}

ko.applyBindings(vm);

td { background: #eee; padding: 5px 10px; }
tr:first-child, td:first-child { font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table><tbody data-bind="foreach: comparisons">
  <tr>
    <td data-bind="text: comparisonName"></td>
    <!-- ko foreach: comparedValues -->
    <td data-bind="text: $data"></td>
    <!-- /ko -->
  </tr>
</tbody></table>

此选项最适合您想要扩展比较功能的情况，例如比较多个产品、保存用户对包含或不包含哪些功能的偏好等。

选项 B:处理它(因为缺少更好的标题)

只需保留您的数据，同时使用 foreach 遍历两个对象。在代码中:

var inputData = [
  { name: "First product", rating: 4.5, price: "$3.50", color: "Gray" },
  { name: "Another product", rating: 3.5, price: "$2.95", color: "Yellow" }
];

function RootVm(data) {
  var self = this;
  this.products = ko.observableArray(data);
  this.keys = ko.computed(function() {
    if (self.products().length === 0) return [];
    return Object.keys(self.products()[0]);
  });
}

ko.applyBindings(new RootVm(inputData));

td { background: #eee; padding: 5px 10px; }
tr:first-child, td:first-child { font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table><tbody data-bind="foreach: keys">
  <tr>
    <td data-bind="text: $data"></td>
    <!-- ko foreach: $root.products -->
    <td data-bind="text: $data[$parent]"></td>
    <!-- /ko -->
  </tr>
</tbody></table>