我有一个类似于以下内容的数组
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"
}]
})
]
我正在尝试使用绑定在单击项目时仅显示订单的额外信息。因此,我有一个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绑定可以在绑定中使用吗?或者我甚至需要一个?如果我使用“with”绑定绑定它,是否有某种方法可以获得多个生产项目?我知道这很容易,而且可能正好盯着我。
另外,在创建项目模型时,我正在执行以下操作,我认为这可能不正确。
function Order(data) {
self.orderId = ko.observable();
self.name = ko.observable();
self.production = ko.observableArray([
[
self.pType = ko.observable(),
self.by = ko.observable()
]
]);
}
答案 0 :(得分:1)
您不必在主表中创建新表。对于儿童系列,您必须使用&#34; ko foreach:production&#34;作为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());