无法使用敲除将数据绑定到 table

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   </th>
            <th>Detail   </th>
            <th>Description   </th>
            <th>Total Days   </th>
            <th>Remaining Inner Limit   </th>
            <th>Claimed   </th>
            <th>Approved   </th>
            <th>Excess   </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 变量数据绑定到我的 table。看来我无法将数据推送到 benefitData 对象中。我一直在做 console.log rowType，Json 数据可以通过 console.log.

读取

我不知道，这一定是一个简单的数据绑定，但我不知道错误的部分在哪里。我想不通。

提前感谢您的建议！

Answer 1

对 table 单元格中的文本使用 text 绑定而不是 value：

<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

The value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as input, select and textarea.

换句话说，它适用于表单元素并进行双向绑定，因此当您更改值时，knockout 会自动更新您的 ViewModel。

另一方面，text binding

Typically this is useful with elements like span or em that traditionally display text, but technically you can use it with any element.

所以你应该在这里使用 text 绑定，因为 <td> 元素有静态内容。

无法使用敲除将数据绑定到 table

Can not data bind to table using knockout

data-binding

knockout.js