使用 post 命令创建 KnockoutJS ViewModel 以填充 ViewModel

【问题标题】：Creating a KnockoutJS ViewModel with a post command to fill the ViewModel使用 post 命令创建 KnockoutJS ViewModel 以填充 ViewModel
【发布时间】：2012-06-14 18:33:07
【问题描述】：

我正在尝试通过 json 将来自服务器的模型绑定到我在客户端创建的视图模型，然后使用 Knockout.js 绑定它以显示数据。我有以下代码

function tireRunDataViewModel() {
        var self = this;

        self.load = function() {
            $.jQuery.post('./GetTireRunModel', { outingID: '@Model' }, function (result) {
                self.data = ko.mapping.fromJS(result);
            } , "json");
        };

        self.load();
    }

var viewModel = new tireRunDataViewModel();
ko.applyBindings(viewModel);

在完成 ko.applyBindings 之前似乎没有设置 self.data。为什么会这样？我该怎么做才能确保在 applyBindings 完成之前填写 self.data？

【问题讨论】：

标签： javascript knockout.js knockout-mapping-plugin

【解决方案1】：

对$.jQuery.post 的调用是异步的，因此回调在完成之前不会执行，这是在调用ko.applyBindings 之后。

几个选项：

您可以在回调中调用ko.applyBindings。如果您的应用程序没有比这更复杂，那么可以选择在 AJAX 调用完成后应用绑定。
您可以将self.data 创建为可观察对象，然后在回调中更新它，例如：self.data(ko.mapping.fromJS(result));。然后在您的 UI 中，您可以在依赖于 data 的 UI 周围使用 data 上的 with 绑定，以便在准备好之前不会渲染它。

快速模拟一下：http://jsfiddle.net/rniemeyer/Wf8E8/

【讨论】：

我最初在回调中有应用绑定，但我正在尝试添加一些保存功能，而重构是我遇到这个问题的地方。
那么，第二个选项可能更可取。使data 成为可观察对象并在回调中更新它的值。