ko.computed in TypeScript

Question

I've the following problem. The following code works in 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;

};

In Typescript I tried it this way, but this doesn't work:

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();
    });
}

}

It never jumps into ko.computed(). Does anyone has an idea why not? I'm new to typescript

Thank you very much. Best Regards

You're calling return before you get to the computed definition. — Roy J, Mar 27 '15 at 16:38

Svakinn · Accepted Answer · 2015-04-29T17:40:37.297

Since you are moving to TypesSript you should use the opertunity to think object oriented and use classes and modules. That way you produce much more readable code. Your class could look like this:

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('');
    }
}

But your problem is based on making sure that the subscrptions and computeds are set in the constructor of the class (or what in your example equals constructor). In fact you do not need to use compuded in your example since you can extend the Knockout observable for throtteling.

ko.computed in TypeScript

1 Answers1