我有 3 个单独的 div。第一个 div 绑定到主视图模型- QuoteSimpleSearchVM
第二个div QdetailsDiv绑定到主视图模型- QuoteSimpleSearchVM
第三个 div LineItemresult绑定到 对象 SimpleSearchResults 中的 observableArray ProductDetailsArrObj 。
主视图模型——QuoteSimpleSearchVM 有一个可观察的数组——simpleSearchResultsArray。在选择 simpleSearchResultsArray 的数组元素之一时，调用方法 BindDataToQuotesDetailVM 和 BindProductsDetails。BindProductsDetails 方法填充数组 - ProductDetailsArrObj。
假设我选择了第一个 simpleSearchResultArray 元素，那么simpleSearchResultArray()[0].ProductDetailsArrObj必须绑定到 div- LineItemresult
所以整个结构看起来像：
QuoteSimpleSearchVM --> simpleSearchResultsArray()[0] --> ProductDetailsArrObj.
如何绑定查看simpleSearchResultsArray()[0]？ProductDetailsArrObj我在其他场景中使用过$root& 。$parent无法针对当前方案解决此问题。
将可观察数组ProductDetailsArrObj绑定到视图时出现错误。这是查看代码：
<div id="searchResultQuotes" data-bind="visible: $root.showResultTable">
<div id="resultTable">
<table id="my-table">
<thead id="resultTableHeader">
<tr data-bind="foreach: gridOptions.columns">
<th data-bind="visible: checked, text: header">
</th>
</tr>
</thead>
<tbody id="resultTableBody" data-bind="foreach: simpleSearchResultsArray">
<tr>
<td>
<span data-bind="text: $index()+1"></span>
</td>
<td>
<span data-bind="text: jobName"></span>
</td>
<td>
<span data-bind="text:qName"></span>
</td>
<td>
<a style="margin-left: auto; margin-right: auto; border: none; background: transparent;box-shadow: none;" data-role="button" data-icon="table_view" data-iconpos="notext" style="text-decoration: none; top: 1%" data-bind="click:function(){ $root.ShowQuotesDetails(qName);}"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="QdetailsDiv" >
<div>
<div>
<div>
<span>Job Name</span></div>
<div>
<input type="text" id="txtQDJobName" data-bind="value:jobName" /></div>
</div>
<div>
<div>
<span>Scenarios</span></div>
<div>
<input type="text" id="txtScenarioDescription" data-bind="value:scenarios" /></div>
</div>
</div>
</div>
<div id="LineItemresult">
<div class="result">
<table>
<thead>
<tr>
<th style="text-align: center">
<b>column 1</b>
</th>
<th style="text-align: center">
<b>column 2</b>
</th>
<th style="text-align: center">
<b>column 3</b>
</th>
</tr>
</thead>
<tbody id="LineItemTemplateBody" data-bind="foreach: ProductDetailsArrObj">
<tr>
<td>
<span data-bind="text:Line"></span>
</td>
<td>
<span data-bind="text:HighLevel"></span>
</td>
<td>
<span data-bind="text:Designation"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
查看模型代码：
ProductDetails = function () {
var self = this;
self.Line = ko.observable();
self.HighLevel = ko.observable();
self.Designation = ko.observable();
};
QuoteDetails = function () {
var self = this;
self.jobName = ko.observable();
self.scenarios = ko.observable();
};
function SimpleSearchResults() {
var self = this;
self.index = ko.observable();
self.jobName = ko.observable();
self.qName = ko.observable();
self.view = ko.observable();
self.quoteDetailsObj = new QuoteDetails();
self.ProductDetailsArrObj = ko.observableArray([]);
self.BindProductsDetails = function () {
var tempArray = [];
console.log(self.ProductDetailsArrObj());
var data=[{itemNumber:'1',highLevelItem:'HL1',designation:'1'}, {itemNumber:'2',highLevelItem:'HL2',designation:'2'}, {itemNumber:'3',highLevelItem:'HL3',designation:'3'}];
for (var k = 0; k < data.length; k = k + 1) {
var tempProdDetails = new ProductDetails();
tempProdDetails.Line(data[k].itemNumber);
tempProdDetails.HighLevel(data[k].highLevelItem);
tempProdDetails.Designation(data[k].designation);
tempArray.push(tempProdDetails);
}
console.log(tempArray.length);
self.ProductDetailsArrObj(tempArray);
ko.applyBindings(self.ProductDetailsArrObj, document.getElementById("LineItemresult"));
};
self.BindDataToQuotesDetailVM = function () {
self.quoteDetailsObj.jobName("job name 1");
self.quoteDetailsObj.scenarios("scenario 1");
ko.applyBindings(self.quoteDetailsObj, document.getElementById("QdetailsDiv"));
self.BindProductsDetails();
};
};
function QuoteSimpleSearchVM() {
var self = this;
self.showResultTable = ko.observable(false);
self.showQuoteDetails= ko.observable(false);
self.simpleSearchResultsArray = ko.observableArray([]);
self.gridOptions = {
columns: [{
header: 'Index',
dataMember: 'index',
checked: ko.observable(true)
}, {
header: 'Job Name',
dataMember: 'jobName',
checked: ko.observable(true)
}, {
header: 'Quote Name',
dataMember: 'qName',
checked: ko.observable(true)
}, {
header: 'Quote Number',
dataMember: 'quoteNumber',
checked: ko.observable(true)
}]
};
self.Search = function () {
var temparray = [];
self.showResultTable("true");
var data=[{jobName: 'job 1', documentName: 'quote name 1'}, {jobName: 'job 2', documentName: 'quote name 2'}, {jobName: 'job 3', documentName: 'quote name 3'}];
for (var k = 0; k < data.length; k = k + 1) {
var temp = new SimpleSearchResults();
temp.index = k + 1;
temp.jobName = data[k].jobName;
temp.qName = data[k].documentName;
temparray.push(temp);
}
self.simpleSearchResultsArray(temparray);
if (data.length > 0) {
self.showResultTable(true);
}
ko.applyBindings(QuoteSimpleSearchVMObj, document.getElementById("QdetailsDiv"));
};
self.ShowQuotesDetails= function(quoteName){
self.showResultTable("false");
self.showQuoteDetails("true");
ko.utils.arrayForEach(self.simpleSearchResultsArray(), function (SimpleSearchResultsObj) {
if (SimpleSearchResultsObj.qName == quoteName) {
SimpleSearchResultsObj.BindDataToQuotesDetailVM();
}
})
};
};
var QuoteSimpleSearchVMObj;
$(document).ready(function () {
QuoteSimpleSearchVMObj = new QuoteSimpleSearchVM();
ko.applyBindings(QuoteSimpleSearchVMObj, document.getElementById("searchResultQuotes"));
QuoteSimpleSearchVMObj.Search();
});
QuoteSimpleSearchVM- 是主视图模型。
单击 + 登录视图，作业名称、场景和列与视图模型数据绑定，调用方法 BindDataToQuotesDetailVM、BindProductsDetails 来绑定数据。我收到一个参考错误：无法解析绑定。消息：ReferenceError：未定义 ProductDetailsArrObj；绑定值：foreach：ProductDetailsArrObj
谁能帮我解决这个问题？相同的 jsfiddle 链接：http: //jsfiddle.net/ynV35/45/