Using TypeScript with knockout for custom binding efforts

Question

Using TypeScript with knockout for custom binding efforts

I am in the process of developing a TypeScript class that will handle all bindings using Knockout's mechanisms. Although I have made progress with the initial steps, I have encountered a roadblock. While I can successfully bind data to my HTML elements, I am struggling to manipulate them and trigger a refresh of the bindings.

Here is what I have implemented so far:

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));
        }
    }
}

This class is utilized as follows:

Class MyPage {

    private _binder: Data.Binder;

    public constructor() {

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

    }

    public MethodA = () => {
        // perform operations on the binder.ObservableContext() and update data
    }

}

Despite trying various approaches, I have been unable to successfully refresh the bindings after modifying the _binder instance. The data within _binder is being updated correctly, but the changes are not reflected on the screen.

Any suggestions or solutions would be greatly appreciated!

typescript knockout.js data-binding

Answer 1

Answer №1

The purpose of the binder may not be entirely clear, but it appears that the main objective is to integrate TypeScript with knockout. Since TypeScript is essentially an extension of JavaScript, you have the ability to implement all standard functionalities as outlined on the knockout website.

For a more streamlined development experience, however, it is recommended to utilize @types/knockout

Here is a classic example of utilizing knockout with TypeScript:

Template:

<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>

Your view model.

import ko from "knockout";

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

    // Example of computed property
    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);
    }
}

Answer 2

The purpose of the binder may not be entirely clear, but it appears that the main objective is to integrate TypeScript with knockout. Since TypeScript is essentially an extension of JavaScript, you have the ability to implement all standard functionalities as outlined on the knockout website.

For a more streamlined development experience, however, it is recommended to utilize @types/knockout

Here is a classic example of utilizing knockout with TypeScript:

Template:

<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>

Your view model.

import ko from "knockout";

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

    // Example of computed property
    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);
    }
}

Using TypeScript with knockout for custom binding efforts

Answer №1

Similar questions

Using GraphQL to set default values in data within a useEffect hook can lead to never

Unable to swap out string with text box in TypeScript

What is the best way to inform TypeScript that the output of the subscribe method should be recognized as an array containing elements of type

How can I specifically activate the keydown event for alphanumeric and special characters in Angular7?

What is the best way to update the color of a label in a Mantine component?

VueJS component fails to properly sanitize the readme file, as discovered by Marked

Tips for identifying the most effective element locator in the DOM with Playwright

Send empty object using FormBuilder

ng-click-outside event triggers when clicking outside, including within child elements

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Error message encountered: Missing property status in TypeScript code

Is there a way to utilize an Event Emitter to invoke a function that produces a result, and pause until the answer is provided before continuing?

How is it possible that TypeScript does not provide a warning when a function is called with a different number of arguments than what is expected?

Arrange an array of objects by making a nested API call in Angular

What is the best way to export Class methods as independent functions in TypeScript that can be dynamically assigned?

Issue - The path to the 'fs' module cannot be resolved in ./node_modules/busboy/lib/main.js

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

Modify the Text Displayed in Static Date and Time Picker Material-UI

Tips for obtaining type narrowing for a function within a mixed array

Initializing ngOnInit and saving the value to an array variable