observable array- reference error- knockout.js

Question

我有3个独立的div。 第一个div被绑定到主视图模型 - QuoteSimpleSearchVM

的第二个div QdetailsDiv结合到主视图模型 - QuoteSimpleSearchVM

第三DIV LineItemresult被绑定到observableArray ProductDetailsArrObj 它位于对象SimpleSearchResults内。

主视图模型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/

Answer 1

将viewModel绑定到HTML使其在$ knockout环境中变为$ root，并且它的变量和方法变为$ data。你不能再通过名字来称呼它。在这种情况下，绑定到div的viewModel部件是一个数组的解决方案是使用foreach: $data而不是foreach: ProductDetailsArrObj。

OLD答案更新

这是在淘汰赛中最常见的错误之前。简单的错误类型，名称或结构更改会导致消息无法分析绑定。你必须学会​​自己解决这个问题，否则你不会用knockoutjs去解决问题。 KO很好，可以给你一个你应该在你的HTML中搜索的变量名称。

您的Product详细信息ArrObj位于另一个对象SimpleSearchResults中，因此它应该在名称空间或内部foreach循环中与完整路径一起使用，因为SimpleSearchResults是一组项目。你说HTML绑定了不同的视图，但是你的JS说了一些不同的东西。

这被称为敲除作为上下文。您可以在KO文档中阅读有关它的更多信息：http://knockoutjs.com/documentation/binding-context.html