2013-07-12 6 views
0

У меня есть observableArray имя simpleSearchResultsArray, который содержит данные, и массив gridOptions, который содержит имена заголовков таблицы. Код то же самое на: http://jsfiddle.net/FENuV/8/не в состоянии связать наблюдаемый массив - нокаут

код зрения:

<table id="resultTableBody"> 

    <thead id="resultTableHeader"> 
     <tr style="text-align: center" data-bind="foreach: columns"> 
      <th style="text-align: center" data-bind="visible: checked, text: header"> 
      </th> 
     </tr> 
    </thead> 

    <tbody data-bind="foreach: simpleSearchResultsArray"> 
     <tr data-bind="foreach: $parent.gridOptions.columns"> 
      <td data-bind="text: $parent[dataMember], visible:checked"> 
      </td> 
     </tr> 
    </tbody> 

</table> 

Посмотреть код модели:

function QuoteSimpleSearchVM() { 
    var self = this; 

     self.gridOptions = { 
     columns: [{ 
      header: 'Index', 
      dataMember: 'index', 
      checked: ko.observable(true) 
     }, { 
      header: 'Job Name', 
      dataMember: 'jobName', 
      checked: ko.observable(true) 
     }, { 
      header: 'Quote Name', 
      dataMember: 'quoteName', 
      checked: ko.observable(true) 
     }, { 
      header: 'Quote Number', 
      dataMember: 'quoteNumber', 
      checked: ko.observable(true) 
     }, { 
      header: 'Bid date', 
      dataMember: 'bidDate', 
      checked: ko.observable(true) 
     }, { 
      header: 'Last modified', 
      dataMember: 'lastModified', 
      checked: ko.observable(true) 
     }, { 
      header: 'Document Type', 
      dataMember: 'docType', 
      checked: ko.observable(true) 
     }, { 
      header: 'Status', 
      dataMember: 'status', 
      checked: ko.observable(true) 
     }, { 
      header: 'View', 
      dataMember: 'view', 
      checked: ko.observable(true) 
     } 
     ] 
    }; 

    self.simpleSearchResultsArray={ 
     Result:[{ 
     bidDate: "07/11/2013", 
     docType: "QUOTE", 
     index: 1, 
     jobName: "MobileTestingReportGenerationJob", 
     lastModified: "07/11/2013", 
     quoteName: "MobileFunctionalQuote", 
     quoteNumber: "ftcc06000_06241300_01_00_O00", 
     status: "Pending Quote Approval" 
     }, { 
     bidDate: "08/28/2012", 
     docType: "QUOTE", 
     index: 2, 
     jobName: "_Aug28th_GLOBAL_CHANGE", 
     lastModified: "07/11/2013", 
     quoteName: "32259_Purify", 
     quoteNumber: "ftfs04000_08281200_07_00_O00", 
     status: "Draft" 
     } 
    ]}; 
} 

$(document).ready(function() { 
    var tempVM= new QuoteSimpleSearchVM(); 
    ko.applyBindings(tempVM.gridOptions, document.getElementById("resultTableHeader")); 
    ko.applyBindings(tempVM.simpleSearchResultsArray, document.getElementById("resultTableBody")); 
}); 

Я получаю ошибку связывания. Может ли кто-нибудь помочь мне с решением?

Заранее спасибо.

ответ

0

Почему вы связываете tempVM.gridOptions с узлом? Вместо этого вы должны привязать свою модель представления. И просто добавьте with в <thead id="resultTableHeader" data-bind="with: gridOptions">.

Посмотрите здесь: http://jsfiddle.net/kreeg/FENuV/9/

+0

Спасибо за ответ. Но как я могу отобразить данные, которые являются частью массива simpleSearchResultsArray? Можете ли вы изменить jsfiddle для этого? Вот ссылка: http://jsfiddle.net/FENuV/11/ – user2439903

+0

Ваш 'simpleSearchResultsArray' не является массивом, это объект. Вместо этого используйте 'simpleSearchResultsArray.Result'. Проверьте здесь http://jsfiddle.net/kreeg/FENuV/12/ –

1

Вам не нужно ko.applyBindings вызова дважды. Назовите его на родительском узле и привяжите foreach к вашим объектам.

<tr style="text-align: center" data-bind="foreach: gridOptions.columns"> 

и

<tbody data-bind="foreach: simpleSearchResultsArray.Result"> 

Look out here

Смежные вопросы