代码之家 › 专栏 › 技术社区 › Dams

TypeScript和knockout自定义活页夹

data-binding knockout.js typescript

Dams · 技术社区 · 6 年前

我想创建一个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
    }

}

我尝试了许多方法来实现它,但在修改了\u活页夹之后,仍然无法刷新绑定。装订数据已更改,但结果不会显示在屏幕上。

有什么想法吗?

1 回复 | 直到 6 年前

mykhailo.romaniuk 6 年前

不太清楚 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);
    }
}

推荐文章

lily · 淘汰-如何将动态填充的复选框转换为单选按钮(是/否)?

6 年前

Dams · TypeScript和knockout自定义活页夹

6 年前

Sarah · 什么是原型和订阅淘汰?

6 年前

Ian · 敲除ValidationMessage绑定未显示消息

6 年前

Tamer · 使用dxTreeList在页面加载时显示所选节点

6 年前

Enrico Casanova · 使用颜色选择器更改可观察数组中对象的属性

7 年前

JGuymer · 淘汰JS安全建议/开发工具

7 年前

Amit Bhagat Kunal Valecha · 组件参数中可观察的通过值

7 年前

kaka1234 · 淘汰JS:从viewmodel observable数组创建Json

7 年前

Tr Ex · 最小化窗口时,标签的文本与文本区域重叠

7 年前