javascript - "with"Knockout Js 中多维数组上的数据绑定(bind)

Question

我有一个如下所示的数组

var initData = [
    new Order({
        orderId: "183175",
        name: "Columbus Africentric",
        production: [{
            pType: "Art Time",
            by: "MJ"
        }, {
            pType: "Front Pocket",
            by: "WB"
        }]
    }),
    new Order({
        orderId: "198675",
        name: "Stanford High",
        production: [{
            pType: "Art Time",
            by: "MJ"
        }, {
            pType: "Full Back",
            by: "WB"
        }]
    })
]

我正在尝试进行绑定(bind)，以便在单击该项目时仅显示订单的额外信息。因此，我有一个用于订单的 foreach，它在表中显示 orderId 和名称，还有一个单击按钮，然后应显示所选订单的所有生产项目。类似于下面的内容

  <tbody data-bind="foreach:orders">
     <tr>
     <td>
       <label class="read" data-bind="text:orderId, visible:true" />
     </td>
     <td>
      <label class="read" data-bind="text:name, visible:!$root.isItemEditing($data)" />
     </td>
     <td>
     <td class="tools">
      <div data-bind="if: production"><button data-bind="click: $root.toggleProductionMode">Production</button>
       </div>
      </td>
      </tr>
      <tr data-bind="visible: showProductionOrder, with: production">
      <td colspan="5">
      <h3>Production Summary</h3>
       <table class="ko-grid">
           <thead>
            <tr>
              <th>Type</th>
              <th>By</th>
            </tr>
           </thead>
           <tbody 
              <tr>
              <td>
               <label class="read" data-bind="text:pType, visible:!$root.isItemEditing($data)" />
               </td>                     
                <td>
                 <label class="read" data-bind="text:by, visible:!$root.isItemEditing($data)" />
                </td>
                </tr>
                </tbody> 
     </table>
  </tr>   

我想我需要使用 foreach 来获取生产信息。 foreach 绑定(bind)可以在 with 绑定(bind)内使用吗？或者我还需要一个吗？如果我使用“with”绑定(bind)来绑定(bind)它，是否有某种方法可以获取多个生产项目？我知道这非常简单，而且它可能就在我面前。

此外，在创建项目模型时，我正在执行以下操作，我认为这可能是不正确的。

function Order(data) {
    self.orderId = ko.observable();
    self.name = ko.observable();
    self.production = ko.observableArray([
        [   
            self.pType = ko.observable(),
            self.by = ko.observable()
        ]
    ]);
}   

Answer 1

您不必在主表内创建新表。对于子集合，您必须使用“ko foreach:生产”作为 html 注释，然后添加 tr 标签以显示生产项目。看看这个 JSFiddle示例。

// HTML
<table>
    <tr>
        <th>Student ID</th>
        <th>Student Name</th>
    </tr>
    <tbody data-bind="foreach: Students">
        <tr>
            <td data-bind="text: StudentID"></td>
            <td data-bind="text: StudentName"></td>
        </tr>
        <!-- ko foreach: Courses -->
            <tr>
                <td style='padding-left:20px;' data-bind="text: CourseID"></td>
                <td  style='padding-left:20px;' data-bind="text: CourseName"></td>
            </tr>
         <!-- /ko -->
    </tbody>
</table>

// KNOCKOUT CODE

function StudentViewModel() {
    var self = this;

    self.Students = [
        { StudentID: "1", StudentName: "Ali", 
           Courses: [ { CourseID: "100", CourseName: "Math" }, { CourseID: "102", CourseName: "Physics" } ] 
        },
        { StudentID: "2", StudentName: "Isa" ,
         Courses: [ { CourseID: "103", CourseName: "Chemistry" }, { CourseID: "104", CourseName: "Social Studies"   } ] },
        { StudentID: "3", StudentName: "Zoya" ,
        Courses: [ { CourseID: "100", CourseName: "Math" }, { CourseID: "106", CourseName: "Stats" } ] },
    ];
}

ko.applyBindings(new StudentViewModel());