私は3つの別々のdivを持っています。最初の div は、メイン ビュー モデルQuoteSimpleSearchVMにバインドされます。
2 番目の div QdetailsDivは、メイン ビュー モデルQuoteSimpleSearchVMにバインドされます。
3 番目の div LineItemresultは 、オブジェクト SimpleSearchResults 内にあるobservableArray ProductDetailsArrObjにバインドされます。
メイン ビュー モデル - QuoteSimpleSearchVM には、監視可能な配列 - simpleSearchResultsArray があります。simpleSearchResultsArray の配列要素の 1 つを選択すると、メソッド 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/