异步 $.ajax 调用时淘汰映射 (ko.mapping.fromJS()) 不更新目标

Question

我正在尝试使用 ko.mapping 将数据转换为视图模型。结果来自对 Web 服务的异步调用。

简单视图：

<div data-bind="with: myData">
    <div data-bind="text: mapWidth"></div>
    <div data-bind="text: mapHeight"></div>
    <div data-bind="foreach: priceRanges">
    <div data-bind="text: title"></div>
</div>

并且视图模型如下：

var ViewModel = function() {
    var self = this;

    self.myData = null;

    var data = {
        action: 'GetPricePoints',
        type: 'who cares'
    };

    $.ajax({
        url: 'http://cdt.lotamore.com/api/imap',
        data: { "": JSON.stringify(data) },
        //async: false, // works!
        async: true, // doesn't work!!!!!
        type: 'post'
    })
    .done(function (data) {
        self.myData = ko.mapping.fromJS(data);
    })
    .error(function (data) {
        alertError(data);
    })
    .always(function () {
    });
};

当我同步运行它时工作正常。但是，当我异步运行它时，它不会更新我的视图模型中的myData。

我在这里创建了一个小提琴： http://jsfiddle.net/jgergen/jF9pm/20/

我真的不想进行阻塞 UI 线程的 ajax 调用！ 我在这里做错了什么？

谢谢， 吉姆

Answer 1

解决办法如下：

我换行了：

    self.myData = null;

到：

    self.myData = ko.observable();

这还不是全部，我之前尝试过，但没有得到好的结果。除了使myData 可观察之外，我还必须更改它的更新方式。这是新的.done 方法：

    .done(function (d) {
        self.myData(ko.mapping.fromJS(d));
    })

所以，我需要做的是像对待任何其他可观察的那样对待这个字段。

您可以在这个新的小提琴中看到它：http://jsfiddle.net/jgergen/jF9pm/47/

我希望这对我有帮助。我在网上搜索了这个问题的解决方案，没有任何结果。就是这样。

谢谢， 吉姆