Question

 I have a GetMainTestResuls mothed that returns the following data using pre tab.

    <pre data-bind="text: ko.toJSON(GetMainTestResult, null, 2)"></pre>

[
 [],
 [
  {
     "groupTestName": "Test Group 1",
    "groupTestData": [
    {
      "sectionName": "Section 1",
      "testName": "Test Group 1",
      "totalPassExpect": 10,
      "totalPassRate": "100.00",
      "totalDuration": "30:44:25",
      "loopPassExpected": 10,
      "loopPassRate": "10%",
      "loopDuration": "70:44:25"
    },
    {
      "sectionName": "Section 1",
      "testName": " Test Group 1",
      "totalPassExpect": 200,
      "totalPassRate": "99.50",
      "totalDuration": "01:39:53",
      "loopPassExpected": 100,
      "loopPassRate": "99.00",
      "loopDuration": "600:55:28"
    },
    {
      "sectionName": " Section 1",
      "testName": " Test Group 1",
      "totalPassExpect": 300,
      "totalPassRate": "99.67",
      "totalDuration": "02:27:57",
      "loopPassExpected": 100,
      "loopPassRate": "10.00",
      "loopDuration": "400:48:04"
    }
  ]
  },
  {
  "groupTestName": "Test Group 2",
  .....
    and I am trying to bind this data to my table body as the following. 
   <!-- ko foreach: GetMainTestResult -->
                 <!-- ko if:$data.length > 0 -->                
                    <div class="SubHeaderFont col-lg-offset-2 headerTitle">Main Test</div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                              ... 
                            </tr>
                        </thead>
                        <tbody>
                            <!-- ko foreach: $data.groupTestData -->
                            <!-- ko if: $index() == 0 -->

                            <tr>
                                <td>Section<span data-bind="text: $data.sectionName"></span></td>
                                <td data-bind="text: $data.totalPassExpect"></td>
                                <td data-bind="text: $data.totalPassRate"></td>
                                <td data-bind="text: $data.totalDuration"></td>
                                <td data-bind="text: $data.loopPassExpected"></td>
                                <td data-bind="text: $data.loopPassRate"></td>
                                <td data-bind="text: $data.loopDuration"></td>
                            </tr>
                            <!-- /ko -->
                            <tr>
                                <td data-bind="text: $data.testName"></td>
                                <td data-bind="text: $data.totalPassExpect"></td>
                                <td data-bind="text: $data.totalPassRate"></td>
                                <td data-bind="text: $data.totalDuration"></td>
                                <!-- ko if:$index() > 0 -->
                                <td data-bind="text: $data.loopPassExpected"></td>
                                <td data-bind="text: $data.loopPassRate"></td>
                                <td data-bind="text: $data.loopDuration"></td>
                                <!-- /ko -->
                            </tr>
                            <!-- /ko -->
                        </tbody>
     ....
            <!-- /ko -->
        <!-- /ko-->

我的viewModel工作正常，我绑定到其他对象的表头也可以正常工作但是表体没有显示除表头之外的任何数据。这有什么不对？你能帮忙吗？

Answer 1

您希望$data成为此处的测试组：

<!-- ko foreach: $data.groupTestData -->

但它是一组测试组，由：

定义

<!-- ko foreach: GetMainTestResult -->

您缺少另一个循环，因为GetMainTestResult是一组测试组数组。

编辑：

例如，您可以为每个测试组显示一个表格，如下所示：

1 - 循环测试组
2 - 循环测试组数据

<!-- ko foreach: GetMainTestResult -->
    <!-- ko if:$data.length > 0 -->
    <!-- ko foreach: $data -->              <!-- *** the new loop *** -->
    <div class="SubHeaderFont col-lg-offset-2 headerTitle"
         data-bind="text: groupTestName">
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
              ... 
            </tr>
        </thead>
        <tbody>
        <!-- ko foreach: groupTestData -->
            <!-- ko if: $index() == 0 -->
            <tr>
                <td>Section<span data-bind="text: $data.sectionName"></span></td>
                <td data-bind="text: $data.totalPassExpect"></td>
                <td data-bind="text: $data.totalPassRate"></td>
                <td data-bind="text: $data.totalDuration"></td>
                <td data-bind="text: $data.loopPassExpected"></td>
                <td data-bind="text: $data.loopPassRate"></td>
                <td data-bind="text: $data.loopDuration"></td>
            </tr>
            <!-- /ko -->
            <tr>
                <td data-bind="text: $data.testName"></td>
                <td data-bind="text: $data.totalPassExpect"></td>
                <td data-bind="text: $data.totalPassRate"></td>
                <td data-bind="text: $data.totalDuration"></td>
                <!-- ko if:$index() > 0 -->
                <td data-bind="text: $data.loopPassExpected"></td>
                <td data-bind="text: $data.loopPassRate"></td>
                <td data-bind="text: $data.loopDuration"></td>
                <!-- /ko -->
            </tr>
        <!-- /ko -->
        </tbody>
    <!-- /ko -->
    <!-- /ko-->
<!-- /ko-->

如何使用knockoutJs将javascript对象数组绑定到表

1 个答案:

编辑：