javascript - knockout 可观察数组中的错误值

Question

我正在开发 web application使用Asp.Net Mvc其中我使用 Knockout Js 通过对数据执行一些操作来检索数据并将其发送到 Html View。

例如，我的数组中有以下数据，名为 datainput

Grade Type Volume Price
A     Buy   1000   10
A     Sell  1200   10
B     Sell  100    100

我正在计算一个数组，当在 html 页面上显示时，它只需要一个不同的 Grade 值并将数据分组到该等级下，例如

A
Buy 1000 10
Sell 1200 10

B
Sell 100 100

使用上面的函数如下

self.uniqueSelect = ko.dependentObservable(function () {
            var Transactiontypes = ko.utils.arrayMap(self.datainput(), function (item) { return item.Grade })
            return ko.utils.arrayGetDistinctValues(Transactiontypes);
        });

我不认为上面的脚本有问题，虽然不确定，但我继续使用从上面的脚本获得的数据，并尝试将其填充到 html，如下所示

 <!--ko foreach: uniqueSelect-->

        <tr>
            <td class="clientproductHeader" data-bind="text: $data"></td>
            <td class="clientproductHeader" colspan="10"></td>
        </tr>


        <tbody data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Grade').index.Grade()[$data]">
<tr>
 <script type="text/html" id="read-template">

        <td data-bind="text: Type"></td>
        <td data-bind="text: Volume"></td>
        <td  data-bind="text: (typeof Price() === 'number') ? Price().toFixed(2) : '' "></td>      

    </script>
</tr>

        </tbody>
        <!--/ko-->

    </table>

由于某些原因，上述脚本会显示重复的数据，例如，如果一个成绩重复两次，如示例数据所示，它会显示该成绩的相同数据两次，如果重复三次，则显示三次，依此类推。

我认为错误出在<!--ko foreach: uniqueSelect-->因为它只是根据相似成绩的数量循环数据。

html 页面上的结果类似于

A
    Buy 1000 10
    Sell 1200 10

B
    Sell 100 100

A
    Buy 1000 10
    Sell 1200 10

在上面的数据中，A 级重复了两次，因此 A 级的所有数据都重复了两次，而 B 级只有一个条目，因此只发生了一次我收到的数据屏幕不知道如何处理这个问题

Answer 1

我仔细阅读并编写了一个版本，该版本可以完成我认为您想要完成的任务。它使用 Pēteris 描述的方法。 See it in action .

您希望 View 代码尽可能简单，并且在返回 $root 时也要小心。如果您确定要使用过滤器来执行此操作，请创建一个执行如下类似分组的过滤器，然后迭代其每个条目/子项。另外，尽量避免在 View 中声明可观察量。

最后，您可以将 groupByGrade() 和 getGrades() 合并到一个函数中，该函数返回一个对象，该对象具有每个结果的属性。这将节省一个迭代周期。

View :

<tr>
  <td class="clientproductHeader" data-bind="text: 'Grade ' + $data + ' (' + $root.log()[$data].length + ' trades)'"></td>
  <td class="clientproductHeader" colspan="10"></td>
</tr>


<tbody data-bind="foreach: $root.log()[$data]">
  <tr>
    <td data-bind="text: type"></td>
    <td data-bind="text: volume"></td>
    <td data-bind="text: (typeof price === 'number') ? price.toFixed(2) : '' "></td>
    <td class="actioncells">

      <a class="btn btn-success" title="Edit" data-bind="click: $root.edit">Edit</a>
    </td>

    <td class="actioncells">
      <a class="btn btn-danger" title="Delete " data-bind="click: $root.remove">Delete</a>
    </td>
  </tr>

</tbody>
<!--/ko-->

和 JavaScript:

function testViewModel() {

  // Underscore and Lo-dash both have a function to group
  // an object by key. That's what you want. Here is a
  // really simple version.
  function groupByGrade(data) {
    return data.reduce(function(last, next) {
      if (last[next.grade]) {
        last[next.grade].push(next);
      } else {
        last[next.grade] = [next];
      }
      return last;
    }, {});
  }

  // Get a unique list of the grades in the data to iterate over
  function getGrades(data) {
    return data.reduce(function(last, next) {
        return !!~last.indexOf(next.grade) ? last : last + next.grade;
    }, '').split('');
  }

  var rawData = [
    {
      grade: 'A',
      type: 'Buy',
      volume: 1000,
      price: 10
    }, {
      grade: 'A',
      type: 'Sell',
      volume: 1200,
      price: 10
    }, {
      grade: 'B',
      type: 'Sell',
      volume: 100,
      price: 100
    }
  ];

  console.log(getGrades(rawData));

  this.log    = ko.observable(groupByGrade(rawData));
  this.grades = ko.observableArray(getGrades(rawData));
}

ko.applyBindings(new testViewModel());