TypeScript 和淘汰赛自定义活页夹

debugcn 发表于 Dev

水坝

我想创建一个打字稿类，它将使用淘汰赛机制完成所有绑定。第一步已经完成，但现在我被卡住了。我可以将数据绑定到我的 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 数据已更改，但结果不会出现在屏幕上。

任何想法？

mykhailo.romaniuk

不太确定的目的是什么binder，但是我认为您的主要任务是使 TypeScript 与淘汰赛一起工作。由于 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);
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。