KnockoutObservableArray<T> 没有被填充

Question

鉴于以下代码，为什么 LookupEditorVM.lookups 最终会成为“未定义”？

我已验证数据正在返回，但可能我误解了 ko.mapping 的工作原理。

代码：

class LookupEditorVM {
    lookups: KnockoutObservableArray<LookupVM>;

    click(item) {
        this.selected(item)
    }

    constructor(baseURL: string) {
        this.lookups = ko.observableArray<LookupVM>([]);
        $.getJSON(baseURL, (data) => {
            ko.mapping.fromJS(data, {}, this.lookups);
        });

        this.selected = ko.observable(undefined);

    }
}

class LookupVM {
    ID: number;
    Name: string;
    DisplayName: string;
    Description: string;
}

Answer 1

见Knockout Binding Context。因为click 在原型上并且在没有任何明确的this 上下文的情况下被调用，所以调用它会丢失它属于哪个类实例。

您还可以通过在 ViewModel 定义中为任何将以这种方式调用的事件处理程序使用箭头函数来解决此问题：

class LookupEditorVM {
    lookups: KnockoutObservableArray<LookupVM>;
    selected: KnockoutObservable<LookupVM>;

    click = (item) => { // <--- Arrow function preserves 'this'
        this.selected(item)
    }

    constructor(baseURL: string) {
        this.lookups = ko.observableArray<LookupVM>([]);
        $.getJSON(baseURL, (data) => {
            ko.mapping.fromJS(data, {}, this.lookups);
        });

        this.selected = ko.observable(undefined);
    }
}