Question

我想创建一个typescript类，它将使用knockout的机制来完成所有绑定。第一步已经完成，但现在我被卡住了。我可以将数据绑定到我的html，但我无法操纵它们并刷新绑定。

到目前为止，我有这个：

import * as ko from "knockout";

module Data {
    export class Binder {
        private _observableContext = ko.observable();

        constructor() { ... }

        public get ObservableContext() {
            return this._observableContext ;
        }
        public set ObservableContext(value: any) {
            this._observableContext = value;
        }

        public bind(elementID: string) {
            ko.applyBindings(this._observableContext, $("#"+elementID));
        }
    }
}

我用这种方式：

Class MyPage {

    private _binder: Data.Binder;

    public constructor() {

        this._binder.ObservableContext({
            data1: MethodA,
            data2: SomeObject.GetData(),
            ...
        });
        this._binder.bind("someHtmlID");

    }

    public MethodA = () => {
        // do some operations on the binder.ObservableContext() and refresh data
    }

}

我尝试了许多方法使其工作但我仍然无法在修改_binder后刷新绑定。 _binder数据已更改，但结果不会出现在屏幕上。

有什么想法吗？

Answer 1

不确定binder的目的是什么，但我假设您的主要任务是使TypeScript与 knockout 一起使用。由于TypeScript只是一个超级JavaScript，你可以做所有在淘汰站点上描述的标准事物。

为了更方便的开发，建议使用@types/knockout

使用TypeScript进行淘汰的典型示例：

模板：

<div id="content">
    <div data-bind="text: previousCount"></div>
    <div data-bind="text: count"></div>
    <button type="button" data-bind="click: increaseCount">Click Me!</button>
</div>

您的视图模型。

import ko from "knockout";

class MyViewModel {
    // use observable for binding to view
    count: KnockoutObservable<number> = ko.observable(0);

    // computed property example
    previousCount: KnockoutComputed<number> = ko.pureComputed(()=> {
        const currentCount = this.count();
        return currentCount - 1;
    });

    constructor() {
        const element = document.getElementById("content");
        ko.applyBindings(this, element);
    }

    increaseCount = ()=> {
        const currentCount = this.count();
        this.count(currentCount + 1);
    }
}

TypeScript和knockout自定义绑定器

1 个答案: