Question

我想要实现的是，如果我的ajax调用返回数据，我将隐藏一个表并通过将 display 值传递给 none 和来显示另一个表正常

查看我的 jsfiddle 了解实时样本。

好的伙计们，这是我的表格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函数返回值，如果没有数据返回，它已经通过返回第一个选项运行良好，如果存在数据返回则返回第二个选项。 请参阅console.log

我已经尝试了第二个条件，它运行良好。但是如果出现第一个条件，看起来我的表样式不会与来自knockout变量的值绑定。

请建议我解决这个问题的方法，我已经从昨天开始追踪，但仍然不知道为什么我的桌面风格不会更新。

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

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;，您应该看到一条记录，如果您设置了任何其他值，您将看到＆＃34;没有索赔记录＆＃34;消息。

Knockout表样式绑定 - 表样式未更新

1 个答案: