TypeScript 和淘汰赛自定义活页夹答案

【问题标题】：TypeScript and knockout custom binderTypeScript 和淘汰赛自定义活页夹
【发布时间】：2018-10-15 01:09:11
【问题描述】：

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

有什么想法吗？

【问题讨论】：

您想用活页夹实现什么目标？您是否只需要更改绑定器上下文中的属性值并期望 UI 更新？还是最终会变得更复杂？
目的是创建一个使用knockout力量的自定义框架。所以 binder 对象应该完成我的类（实际上就像 viewmodels）和 HTML 之间的所有绑定，因为没有经典的导航（导航是通过实例化类并在一个容器中加载部分 html 来完成的）
如果您尝试基于 knockout 构建自定义 SPA - 最好采用一些 Angular 代替））））如果您仍然想使用 knockout 做到这一点 - 从现有解决方案中选择一些好的路由器并根据您的需要进行调整。我建议根据components 制作所有内容。所以每个页面都可以是一个单独的组件，每个页面都可以使用绑定流，在my answer 中进行了描述。
感谢您的建议。我会看看组件，这是我的应用程序的精神，所以它肯定会有用。起初没有想到使用 Angular。现在切换到angular还为时不晚，我也去看看。谢谢！

标签： typescript knockout.js data-binding

【解决方案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);
    }
}

【讨论】：

感谢您的回答。我想我将不得不改变我的观点，做一些比我想象的更简单的事情。