ko.computed 打字稿

Question

我遇到了以下问题。以下代码在 JS 中有效：

Application1.Trackers = function (params) {

var viewModel = {
    dsTrackers: new DevExpress.data.DataSource({
        store: Application1.db,
        searchExpr: "Bezeichnung"
    }),

    searchString: ko.observable(''),
    find: function () {
        viewModel.showSearch(!viewModel.showSearch());
        viewModel.searchString('');
    },
    showSearch: ko.observable(false),
};

ko.computed(function () {
    return viewModel.searchString();
}).extend({
    throttle: 500
}).subscribe(function (value) {
    viewModel.dsTrackers.filter("Bezeichnung", "contains", value);
    viewModel.dsTrackers.pageIndex(0);
    viewModel.dsTrackers.load();
});

return viewModel;

};

在 Typescript 中，我尝试过这种方式，但这不起作用：

module MyExtremeApp {
export function Trackers(params: { id: any }) {
    return {
        dsTrackers: new DevExpress.data.DataSource({
            store: MyGlobals.oTrackerManager.getTrackerCustomStore(),
            searchExpr: "Bezeichnung"
        }),

        searchString: ko.observable(''),
        find: function () {
            this.showSearch(!this.showSearch());
            this.searchString('');
        },
        showSearch: ko.observable(false),
    };

    ko.computed(() => {
        return this.searchString();
    }).extend({
        throttle: 500
    }).subscribe(function (value) {
        this.dsTrackers.filter("Bezeichnung", "contains", value);
        this.dsTrackers.pageIndex(0);
        this.dsTrackers.load();
    });
}

}

它永远不会跳转到 ko.computed()。有谁知道为什么不呢？ 我是 typescript 新手

非常感谢。最好的问候

Answer 1

既然你要转向 TypesSript，你应该利用机会思考面向对象并使用 classes 和模块。这样您就可以生成更具可读性的代码。您的 class 可能如下所示：

import mm_data = require('pathToMyDataClass');
import mm_globals = require('pathToMyGlobals');

export interface ITrackerParms {
    id: any;
}
export class Trackers {
    constructor(parms: ITrackerParms) {
        this.parms = parms;
        this.dsTrackers = new DevExpress.data.DataSource({
            store: mm_globals.MyGlobals.oTrackerManager.getTrackerCustomStore(),
            searchExpr: "Bezeichnung"
        });
        this.searchString.extend({ throttle: 500 });
        this.searchString.subscribe((val: string) => {
            this.dsTrackers.filter("Bezeichnung", "contains", val);
            this.dsTrackers.pageIndex(0);
            this.dsTrackers.load();
        }, this);
    }
    public parms: ITrackerParms;
    public dsTrackers: mm_data.ITrackerSource; //interface from your datasource module
    public showSearch = ko.observable(false);
    public searchString = ko.observable('');
    public find() : void {
        this.showSearch(!this.showSearch());
        this.searchString('');
    }
}

但是您的问题是基于确保在 class 的构造函数中设置了订阅和计算（或者在您的示例中等于构造函数）。事实上，您不需要在您的示例中使用 compuded，因为您可以扩展 Knockout observable 以进行节流。

ko.computed 打字稿

ko.computed in TypeScript

knockout.js

typescript

devextreme