0
3 개의 div가 있습니다. 제 DIV 메인 뷰 모델 - QuoteSimpleSearchVM관찰 가능한 배열 참조 오류 -nockout.js
QdetailsDiv 메인 뷰 모델 - QuoteSimpleSearchVM
LineItemresult이 바인딩되는 제 DIV에 결합되는 제 2 DIV를 바인딩 observableArray ProductDetailsArrObj 개체 SimpleSearchResults 내에 있습니다.
기본보기 모델 - QuoteSimpleSearchVM에는 관찰 가능한 배열 simpleSearchResultsArray가 있습니다. simpleSearchResultsArray의 배열 요소 중 하나를 선택하면 BindDataToQuotesDetailVM 및 BindProductsDetails 메서드가 호출됩니다. BindProductsDetails 메서드는 배열 ProductDetailsArrObj를 채 웁니다.
QuoteSimpleSearchVM --> simpleSearchResultsArray()[0] --> ProductDetailsArrObj.
나는 제 simpleSearchResultArray 다음 [0] .ProductDetailsArrObj가
그래서 전체 구조처럼 보이는 div- LineItemresult 결합되어야 simpleSearchResultArray()를 엘리먼트 - 가정하자 선택
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/
답장을 보내 주셔서 감사합니다. 그 질문을 되 새겼다. 나는 프로젝트의 다른 부분에서 $ root와 $ parent를 사용했다. 현재 시나리오에 얽매이지 않았습니다. jsfiddle 문제를 해결하면 어떤 도움을받을 수 있습니까? 그것은 큰 도움이 될 것입니다! – user2439903
나는 당신이 거기에서하고있는 것을보고 있습니다. ProductDetailsArrObj를 div에 바인딩합니다. 그래서 더 이상 ProductDetailsArrObj가 아닙니다. 그러면 $ 데이터입니다. 'Use foreach : $ data'를 실행하면 한 번로드되지만 다른 문제가 있습니다. 답장을 보내 주셔서 감사합니다. –
해결책은 효과가있었습니다. 그러나 나는 다른 문제가 무엇인지 알고 싶었습니다. – user2439903