Knockout没有用当前数据更新页面

时间:2013-04-12 15:27:07

标签: knockout.js knockout-mapping-plugin

我在敲击时无法正确更新我的视图...发生的事情是我进行ajax调用以获取我的视图数据然后使用knockout来渲染它。在后续请求中,我进行ajax调用以获取视图数据,然后使用新内容更新页面。

问题在于电话2,3,4等...页面没有用新数据更新。我正在使用可能是问题的映射插件。

if (filterLogModel == null) {
    filterLogModel = ko.mapping.fromJS(data);
    ko.applyBindings(filterLogModel, document.getElementById("dvFilterLog"));
} else {
    ko.mapping.fromJS(data, filterLogModel);
}

我认为这是正确使用的模式,但也许不是吗?

我已经检查过的事情: 1 - 进入的新数据不同 2 - 通过调试器,第一个请求通过IF块,后续请求通过ELSE块。

如果返回的数据不包含我的html的数据部分,那么

<div id="filterLogResults">
<!-- ko if: $data.length <= 0 -->
    <p class="attention">There are no errors for this task.</p>
<!-- /ko -->
<!-- ko if: $data.length > 0 -->
    <table class="tbl">
        <thead>
            <tr>
                <th>Description</th>
                <th>Value 1</th>
                <th>Operator</th>
                <th>Value 2</th>
                <th>Corrective Action</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $data">
            <tr>
                <td class="nowrap" data-bind="text:Description"></td>
                <td class="nowrap" data-bind="text:Value1"></td>
                <td class="nowrap" data-bind="text:OperatorName"></td>
                <td class="nowrap" data-bind="text:Value2"></td>
                <td class="main" data-bind="text:CorrectiveAction"></td>
            </tr>
        </tbody>
    </table>
<!-- /ko -->
</div>

并且视图确实更新并告诉我没有结果......但是当有数据时,它就像显示缓存的视图或其他内容而不是新数据。

我注意到的另一件事。如果第一个请求包含一些数据。第二个请求不包含任何数据。第三个请求包含一些数据。 - 在这种情况下,第3个请求将显示新数据,而不是第一个请求中的数据。只有当一行中有2个请求具有视图未更新的数据时,才会出现这种情况。

有关如何解决此问题的任何想法?

编辑:完整的JS

function getFilterLogs(suppressErrors, callback) {
    $("#filterLogResults").hide();
    if (!g_objCommon.isBoolean(suppressErrors)) {
        suppressErrors = false;
    }
    if (filterLogAjaxRequest != null) {
        filterLogAjaxRequestAborted = true;
        filterLogAjaxRequest.abort();
    }
    g_objCommon.showLoading();
    filterLogAjaxRequest = $.ajax({
        cache: false,
        type: "GET",
        url: absoluteRootPath + "api/Tasks/GetFilterLogs?id=" + g_nWorklistId,
        contentType: "application/json",
        success: function (data) {
            filterLogAjaxRequest = null;
            g_objCommon.hideLoading();
            if (filterLogModel == null) {
                filterLogModel = ko.mapping.fromJS(data);
                ko.applyBindings(filterLogModel, document.getElementById("dvFilterLog"));
            } else {
                ko.mapping.fromJS(data, {}, filterLogModel);
            }
            if ($.isFunction(callback)) {
                callback(data.length);
            }
            $("#filterLogResults").show();
            $("#filterLogResults .tbl").show();
        },
        error: function () {
            filterLogAjaxRequest = null;
            g_objCommon.hideLoading();
            if (!filterLogAjaxRequestAborted) {
                if (!suppressErrors) {
                    g_objCommon.showErrorModal("There was an error loading the errors.", undefined);
                }
                if ($.isFunction(callback)) {
                    callback(0);
                }
                $("#filterLogResults .attention").show();
                $("#filterLogResults .tbl").hide();
                $("#filterLogResults").show();
            }
            filterLogAjaxRequestAborted = false;
        }
    });
}

1 个答案:

答案 0 :(得分:2)

我发现映射插件有时不会更新视图模型,除非有一个映射对象添加到发送到它的参数列表中:

ko.mapping.fromJS(data, {}, filterLogModel);