TypeScript и выбивка пользовательского связующего - PullRequest
Новая
       19

TypeScript и выбивка пользовательского связующего

0 голосов
/ 04 мая 2018

Я хотел бы создать класс машинописного текста, который будет выполнять все привязки, используя механизмы нокаута. Первые шаги сделаны, но теперь я застрял. Я могу привязать данные к моему 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 хорошо изменены, но результаты не будут отображаться на экране.

Есть идеи?

1 Ответ

0 голосов
/ 05 мая 2018

Не совсем уверен, какова цель 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);
    }
}
...