Knockout table 样式绑定 - Table 样式未更新

Question

我想要实现的是，如果我的 ajax 调用 return 数据，我将通过传递 [=31= 隐藏一个 table 并显示另一个 table ]显示值到none和正常

请参阅我的 jsfiddle 以获取实时样本。

好的伙计们，这是我的 table html :

    <table data-bind="style: { 'display': MainVisible }" id="tblDisplayBenefit" style="border-collapse:separate;border-spacing:2px">
    <thead>
        <tr>
            <th style="padding:2px;width:5px">No.</th>
            <th style="padding:6px;width:250px">&nbsp;Benefit</th>
            <th style="padding:6px;width:100px">Detail</th>
            <th style="padding:6px;width:100px">Description</th>
            <th style="padding:6px;width:20px">Total Days</th>
            <th style="padding:6px;width:120px">&nbsp;Claimed</th>
            <th style="padding:6px;width:120px">Approved</th>
            <th style="padding:6px;width:120px">Excess</th>
            <th style="padding:7px;width:100px">Reduce Max Limit </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: benefitData">
        <tr>
            <td style="border:1px solid;padding:2px;text-align:right;width:5px" data-bind="text: RegId"></td>
            <td style="border:1px solid;padding:6px;width:250px" data-bind="text: BenefitDisplay"></td>
            <td style="border:1px solid;padding:6px;width:100px" data-bind="text: RoomClassDesc"></td>
            <td style="border:1px solid;padding:6px;width:100px" data-bind="text: ManualDesc"></td>
            <td style="border:1px solid;padding:6px;text-align:right;width:20px" data-bind="text: TotalDays"></td>
            <td style="border:1px solid;padding:6px;text-align:right;width:120px" data-bind="text: ClaimAmount"></td>
            <td style="border:1px solid;padding:6px;text-align:right;width:120px" data-bind="text: ClaimApproved"></td>
            <td style="border:1px solid;padding:6px;text-align:right;width:120px" data-bind="text: ClaimExcess"></td>
            <td style="padding:7px;text-align:center;width:100px"> <input type="checkbox" disabled="disabled" data-bind="checked: FgReduceMaxLimit" /> </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: right"><b>TOTAL&nbsp;</b></td>
            <td style="border:1px solid;border-spacing:6px;padding:6px;text-align:right" data-bind="text: totalClaimed"></td>
            <td style="border:1px solid;border-spacing:6px;padding:6px;text-align:right" data-bind="text: totalApproved"></td>
            <td style="border:1px solid;border-spacing:6px;padding:6px;text-align:right" data-bind="text: totalExcess"></td>
        </tr>
    </tfoot>
</table>

<table data-bind="style: { 'display': isVisible }" id="tblWarningClaim" style="border-collapse:separate;border-spacing:2px">
    <tbody>
        <tr>
             <td style="border:1px solid;padding:6px">No Claim Data Found.</td>
        </tr>
    </tbody>
    </table>

这是我的 Javascript 片段代码：

// Global Variable and Function

var testView = function () {

    var self = this;
    self.isVisible = ko.observable('normal');
    self.MainVisible = ko.observable('normal');

    // my other observable variable and function

}

//--------------------------------------------------------



var VM = new testView();
VM.MainVisible = 'normal';
VM.isVisible = 'none';

// My AJAX Call, store the result into ManualRegClaimData
ManualRegClaimData = $.parseJSON(rows.d);

var ClaimExist = ManualRegClaimData[0].BenefitDisplay;

        if (ClaimExist == null) { // No Claim data
            VM.benefitData.removeAll();
            VM.isVisible = 'normal';
            VM.MainVisible = 'none';
            console.log(VM.isVisible, VM.MainVisible);
        }
        else { // Claim data exist
            VM.benefitData.removeAll();
            VM.isVisible = 'none';
            VM.MainVisible = 'normal';
            console.log(VM.isVisible, VM.MainVisible);

        }

我检查了我的 JavaScript 函数 return 值，如果没有数据 return，return 第一个选项已经运行好，并且第二个选项，如果数据 return 存在。 查看 console.log

第二个条件我试过了，运行很好。但是如果第一个条件出现，我的 table 风格似乎没有与 knockout 变量的值绑定。

请建议我解决此问题的方法，我从昨天开始追踪但仍然不知道为什么我的 table 样式不会更新。

谢谢！我会等你的建议..

Answer 1

您已声明 self.isVisible 为可观察的。要将值设置为 self.isVisible，您应该执行 VM.isVisible('none')；不是VM.isVisible = 'none'。请检查您是否也对其他可观察对象进行了同样的操作。

更新了下面的部分代码。请查看 VM.MainVisible 和 VM.isVisible 是如何使用括号设置的。

var testView = function () {

    var self = this;
    self.isVisible = ko.observable('normal');
    self.MainVisible = ko.observable('normal');

    // my other observable variable and function

}

//--------------------------------------------------------



var VM = new testView();
VM.MainVisible('normal');
VM.isVisible('none');

我已经更新了你的 jsfiddle http://jsfiddle.net/da7yL37h/2/ 如果您设置 var TestInput = 1;，您应该看到一条记录，如果您设置任何其他值，您将看到 "No claim records" 消息。

Knockout table 样式绑定 - Table 样式未更新

Knockout table style binding - Table style dont updated

knockout.js