Question

这是我的viewmodel：

function PitchViewModel() {
var self = this;
self.selectedPitch = ko.observable();
self.pitches = ko.computed(function () {
    return $.getJSON("/api/Pitch", function (data) {
        var obs = ko.mapping.fromJS([])
        ko.mapping.fromJS(data, {}, obs) ;
       // seems to work, but somehow observables are changed back into objects after binding
        return obs();
    })}, this).extend({ asyncArray: [{ Id: 1, PitchNumber: 1, Length: 0, Width: 0, HasElectricity: false, Name: "Test" }] });

// behaviours
self.selectPitch = function () {
    console.log("inside selectPitch");
    self.selectedPitch(this);
}

}

我使用的异步扩展程序如下所示：asynchronous computed observables 对于像这样的可观察阵列进行了一点调整（第3行）：

var plainObservable = ko.observableArray(initialValue), currentDeferred;

在我看来，我这样做：

 var domNode = $('#content')[0];
 var pitchViewModel = new PitchViewModel();
 ko.applyBindings(pitchViewModel, domNode);

似乎工作正常。绑定以异步方式发生。到目前为止非常酷。

的然而！ 当（在Chrome中）我在

上放置断点时

return obs();

obs()函数是一个observableArray，并且具有可观察属性的对象。
但是，当我打破

console.log("inside selectPitch");

并检查self.pitches()它已成为正常的＆＃39;数组与对象有正常的＆＃39; （不可观察）属性。

我在这里缺少什么？

顺便说一句：我尝试过使用self.pitches的observableArray而不是可计算的。但是ko.applybindings在可观察数组初始化之前发生，导致绑定错误。

感谢您的帮助。
反

Answer 1

我没有尝试运行你的代码，但我可疑的是，扩展程序使用作为Deferred / Promise返回的ajax调用的结果。您对结果的处理发生在回调函数中，之后不会用于任何事情。

你不应该像这样混合Deferreds和callbacks。请尝试以下方法：

self.pitches = ko.computed(function () {
    return $.getJSON("/api/Pitch")
        .then(function(data) {
            return ko.mapping.fromJS(data);
        });
}).extend({ asyncArray: [...] });

我如何异步加载一个可观察的数组

1 个答案: