javascript - ajax 调用后 knockout 模板绑定(bind)元素不可用

Question

我在绑定(bind)到由 afterRender 事件中的 AJAX 调用触发的 Knockout 模板创建的元素时遇到问题。正如您在 Fiddle 中看到的那样结果正确呈现，但在 afterRender 事件处理程序中，元素仍然不可用。

问题...

• 模板如何正确渲染，因为当 afterRender 事件处理程序运行时它似乎没有渲染？

• 为什么 AJAX 调用会影响结果？如果取消注释掉 AJAX 调用上方的行，模板元素将在 afterRender 事件中可用。

这是代码...

HTML

<div id="plugin" data-bind="template: { name: 'fooTemplate', data: $data, afterRender: postProcess }"></div>
<br />
<br />
<hr />
<div id="results"></div>

<script type="text/html" id="fooTemplate">
    <div data-bind="foreach: items()">
        <span data-bind="text: displayText"></span>
    </div>
</script>

JAVASCRIPT

var data = {
    items: [{
        displayText: 'Name',
    }, {
        displayText: 'Last Login Date',
    }, {
        displayText: 'Email',
    }]
};

function DataModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.data = ko.dependentObservable(function () {
        //self.items(data.items);//   <<== UNCOMMENT THIS LINE AND THE postProcess FUNCTION SHOWS FULLY RENDERED DOM
        $.ajax({
            url: '/some/path',
            error: function () {
                self.items(data.items);
            }
        });
    });

    postProcess = function () {
        $('#results').text($('#plugin').html());
    }
}

dataModel = new DataModel();
ko.applyBindings(dataModel);

注意一点... fiddle 对虚假地址进行 AJAX 调用。这样 Fiddle 就没有服务器依赖性。利用错误属性来更改导致模板运行的数据。但是，在我的开发环境中，调用有效的 url 会产生与 fiddle 中显示的结果相同的结果。另外，我没有使用从服务器返回的数据来加载模板。相反， fiddle 在顶部使用静态定义的数据源(同样只是为了演示问题)。

Answer 1

看看您的示例，您遇到了异步问题。

以下是在没有 $.ajax 调用的情况下流程的工作原理:

1. 触发 dependentObservable 来更新值
2. self.items 已更新为新值
3. 模板呈现
4. 调用了 postProcess 方法，一切看起来都很好。

但是通过 $.ajax 调用，done(和 error)方法是回调，因此流程发生了变化:

1. dependentObservable(使用 ko.compulated 代替!)触发更新值
2. 对服务器进行 $.ajax 调用。
3. 完成(或错误)回调将在完成时排队等待。
4. 模板呈现
5. 调用了 postProcess 方法，但 self.items 仍为空。
6. 服务器响应并更新 self.items 后，将触发完成回调
7. 渲染的模板仍然绑定(bind)到您的 View 模型，因此渲染的模板会更新。

我认为最简单的解决方法是将您的 ajax 调用从您的 dependentObservable 中拉出，以允许您注释掉的情况。