не может связывать данные таблицы с помощью KNOCKOUT

Question

//AJAX Webservice Call 
 
ManualRegDiseaseData = $.parseJSON(rows.d); 
 
     var VM = new testView(ManualRegDiseaseData); 
 
     ko.applyBindings(VM); 
 

 
var testView = function (DiseaseData) { 
 

 
    var self = this; 
 
    self.disease = ko.observableArray(); 
 
    self.benefitData = ko.observableArray(); 
 

 
    var sampleBenefit = [{ "Benefit": "Room", "Detail": "Ordinary", "Desc": "not herbal", "TotalDays": "2", "Remaining": "1000", "Claimed": "400", "Approved": "350", "Excess": "50" }, 
 
       { "Benefit": "Medicine", "Detail": "All", "Desc": "herbal", "TotalDays": "1", "Remaining": "2000", "Claimed": "800", "Approved": "600", "Excess": "100" }]; 
 
    $.each(sampleBenefit, function (x, rowType) { 
 
     var obj = new BenefitObject(); 
 
     obj.Benefit(rowType.Benefit); 
 
     obj.Detail(rowType.Detail); 
 
     obj.Desc(rowType.Desc); 
 
     obj.TotalDays(rowType.TotalDays); 
 
     obj.Remaining(rowType.Remaining); 
 
     obj.Claimed(rowType.Claimed); 
 
     obj.Approved(rowType.Approved); 
 
     obj.Excess(rowType.Excess); 
 
     self.benefitData.push(obj); 
 
    }) 
 

 
    $.each(DiseaseData, function (x, rowType) { 
 
     var obj = new DiseaseObject(); 
 
     obj.DiseaseCode(rowType.DiseaseCode); 
 
     obj.DiseaseName(rowType.DiseaseName); 
 
     self.disease.push(obj); 
 
    }) 
 

 
}

<table id="tblDisplayBenefit" class=""> 
 
    <thead> 
 
     <tr> 
 
      <th>No.</th> 
 
      <th>Benefit&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Detail&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Description&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Total Days&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Remaining Inner Limit&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Claimed&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Approved&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Excess&nbsp;&nbsp;&nbsp;</th> 
 
      <th>Reduce Max Limit </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: benefitData"> 
 
     <tr> 
 
      <td data-bind="value: Benefit"></td> 
 
      <td data-bind="value: Detail"></td> 
 
      <td data-bind="value: Desc"></td> 
 
      <td data-bind="value: TotalDays"></td> 
 
      <td data-bind="value: Remaining"></td> 
 
      <td data-bind="value: Claimed"></td> 
 
      <td data-bind="value: Approved"></td> 
 
      <td data-bind="value: Excess"></td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr> 
 
      <td colspan="6" style="text-align: right">Total</td> 
 
      <td>Total Claimed</td> 
 
      <td>Total Approved</td> 
 
      <td>Total Excess</td> 
 
     </tr> 
 
    </tfoot> 
 
</table>

Таковы мои JS фрагмент кода и мой HTML, проблема в том, что я не могу связать данные переменной JSON образца в моей таблице. Кажется, я не могу подтолкнуть свои данные к объекту benefData. Я делаю console.log rowType, данные Json читаются через console.log.

Я не знаю, это должно быть простой привязкой данных, но я не знаю, где находится часть неисправности. Я не могу понять это.

Заранее благодарим за предложение!

Answer 1

Использование text связывания вместо value текста Int ячеек таблицы:

<td data-bind="text: Benefit"></td> 
<td data-bind="text: Detail"></td> 
<td data-bind="text: Desc"></td> 
<td data-bind="text: TotalDays"></td> 
<td data-bind="text: Remaining"></td> 
<td data-bind="text: Claimed"></td> 
<td data-bind="text: Approved"></td> 
<td data-bind="text: Excess"></td> 

Js Fiddle

Согласно knockout documentation

Значение связывания ссылки значение ассоциированного DOM элемента с a Недвижимость на ваш взгляд. Это обычно полезно с помощью формы элементов, таких как ввод, выберите и textarea.

Другими словами, он работает с элементами формы и делает двустороннюю привязку, поэтому при изменении значения нокаут автоматически обновляет ViewModel.

С другой стороны, text binding

Обычно это полезно с элементами, как пролет или эм что традиционно отображением текста, но технически вы можете использовать его с любым элемента.

Таким образом, вы должны использовать привязку text, потому что элемент <td> имеет статический контент.