我使用嵌套为每个产品使用knock显示每个产品的评论。我的要求，我需要打开一个模态弹出窗口来显示模型弹出窗口中每个产品的评论。
模型弹出窗口包含单选按钮。根据我需要show (VisibleText,VisibleField) or hide (VisibleText,VisibleField)
类似我需要根据复选框的选择显示VisiblePage。我已经根据每个产品编写了它应该工作的事件方法。请帮助，因为事件未在嵌套循环中触发并正常工作。
如果是viewable
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestApplication.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js">
</script>
<script type="text/javascript" src="Scripts/knockout-3.4.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
function ProductVM() {
self = this;
self.Products = ko.observableArray([]);
self.show = ko.observable(false);
function addProduct(productId, productName, reviews) {
return {
ProductId: ko.observable(productId),
ProductName: ko.observable(productName),
Reviews: ko.observableArray([reviews])
}
}
function addReviews(stock, page, visibleStock, visibleOutStock, visiblePage, show) {
return {
FieldType: ko.observable(stock),
PageType: ko.observable(page),
VisibleText: ko.observable(visibleStock),
VisibleField: ko.observable(visibleOutStock),
VisiblePage: ko.observable(visiblePage),
Show :ko.observable(show)
}
}
var data = {
Products: [
{
"ProductId": 1,
"ProductName": "Guitar",
"Reviews": [{
"FieldType": 1,
"PageType": 2,
"VisibleText": 3,
"VisibleField": 4,
"VisiblePage": 5,
"show" : false
}]
},
{
"ProductId": 2,
"ProductName": "Paino",
"Reviews": [{
"FieldType": 1,
"Page": 2,
"VisibleText": 3,
"VisibleField": 4,
"VisiblePage": 5,
"show" : false
}]
}
]
}
console.log(data);
for (var i = 0; i < data.Products.length; i++) {
var p1 = data.Products[i].ProductId;
var p2 = data.Products[i].ProductName;
var r3 = data.Products[i].Reviews;
var reviewObj = '';
for (j = 0; j < r3.length; j++) {
reviewObj = new addReviews(r3[j].FieldType, r3[j].PageType, r3[j].VisibleText, r3[j].VisibleField, r3[j].VisiblePage);
}
self.Products.push(new addProduct(p1, p2, reviewObj));
}
console.log(self.Products())
}
self.FreeTypeChanged = function () {
self.VisibleText(true);
self.VisibleField(false);
};
self.FieldTypeChanged = function () {
self.VisibleField(true);
self.VisibleText(false);
};
self.pageSelectionChanged = function () {
var result = $('#checkPage').prop('checked');
if (result == true) {
self.VisiblePage(true);
}
else {
self.VisiblePage(false);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead></thead>
<tbody data-bind="foreach: Products">
<tr>
<td><span data-bind="text: ProductId"></span></td>
<td><span data-bind="text: ProductName"></span></td>
<td><a id="openModal" class="btn btn-primary" data-toggle="modal" data-target="#testModal">
<span class="fa fa-folder-o">Open Modal</span>
</a></td>
<td>
<table>
<tbody data-bind="foreach: Reviews">
<tr>
<td>
<div class="modal fade" id="testModal" tabindex="-1" role="dialog" data-bind="enable: Show" >
<div class="modal-dialog" role="document" style="width: 100%; align-self: center;">
<div class="modal-content">
<div class="modal-header" style="text-align: left">
Select Field Value
</div>
<div class="modal-body" id="selectorViewBody">
<div class="container">
<div class="form-group">
<label class="radio-inline">
<input type="radio" class="radio" value="FreeText" data-bind="checked: FieldType, event: { change: $parent.FreeTypeChanged }"
name="modelSelection" />
FreeText
</label>
<label class="radio-inline">
<input type="radio" class="radio" value="Field" data-bind="checked: FieldType, event: { change: FieldTypeChanged }"
name="modelSelection" />
Field</label>
</div>
<div class="form-group" data-bind="visible: VisibleText">
<input type="text" id="txtFreeTextName" class="form-control" />
</div>
<div class="form-group" data-bind="visible: VisibleField">
<div class="row">
<div class="col-md-4">
<label for="ddlModuleNames" class="control-label">Domain (Module) :</label>
<select class="form-control" name="ddlModuleNames" data-bind="options: '1 2 3 4', optionsCaption: '--Select Table Names --'"></select>
</div>
<div class="col-md-4">
<label for="ddlModuleNames" class="control-label">Field Name :</label>
<select class="form-control" name="ddlFieldNames" data-bind="options:'1 2 3 4', optionsCaption: '--Select Table Names --'"></select>
</div>
</div>
<div class="row">
<div class="col-md-8">
<label>
<input type="checkbox" class="check" id="checkPage" data-bind="checked: PageType, event: { change: pageSelectionChanged }"
name="pageSelection" />
Show Page/Row</label>
</div>
</div>
</div>
<div class="form-group" data-bind="visible: VisiblePage">
<div class="row">
<div class="col-md-4">
<label for="txtPage" class="control-label">Page</label>
<input type="text" id="txtPage" class="form-control" />
</div>
<div class="col-md-4">
<label for="txtRow" class="control-label">Row</label>
<input type="text" id="txtRow" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary " type="submit">Submit</button>
<button class="btn btn-primary " type="submit">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
ko.applyBindings(new ProductVM());
})
</script>
</form>
</body>
</html>
答案 0 :(得分：0)
您没有添加评论，请尝试更改添加产品，如下所示
function addProduct(productId, productName, reviews) {
return {
ProductId: ko.observable(productId),
ProductName: ko.observable(productName),
Reviews : ko.observableArray(reviews)
}
}