Question

＆＃13;

//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);
    })

}

＆＃13;

 <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>

＆＃13;

这些是我的JS片段代码和我的html，问题是，我无法将示例JSON变量数据绑定到我的表中。看来我无法将我的数据推送到benefitData对象中。我一直在做console.log的rowType，Json数据可以通过console.log读取。

我不知道，这必须是一个简单的数据绑定，但我不知道故障部分在哪里。我无法弄清楚这一点。

提前感谢您的建议！

Answer 1

对表格单元格中的文本使用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

值绑定将关联的DOM元素的值与a相关联视图模型上的属性。这通常适用于表单输入，选择和 textarea 等元素。

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

另一方面，text binding

通常，这对于 span 或 em 等元素非常有用传统上显示文本，但从技术上讲，你可以使用它元件。

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

无法使用knockout将数据绑定到表

1 个答案: