knockout-webpack-ts-quickstart/src/app/components/AppComponent.ts

Quickstart project for knockout.js + TypeScript + decorators with Webpack2.

import { KoComponent }     from "../../lib/KoDecorators";
import { KoComponentBase } from "../../lib/KoComponentBase";


@KoComponent("app", {
    template: require("./AppComponent.html"),
})
export class AppComponent extends KoComponentBase {
    public firstName: KnockoutObservable<string>;
    public lastName: KnockoutObservable<string>;
    public fullName: KnockoutComputed<string>;

    public constructor(params?: { firstName?: string, lastName?: string, context?: any }) {
        super(params);
        this.firstName = this.getObservable(params && params.firstName, "Planet");
        this.lastName = this.getObservable(params && params.lastName, "Earth");
        this.fullName = ko.computed(() => {
            // Knockout tracks dependencies automatically.
            // It knows that fullName depends on firstName and lastName,
            // because these get called when evaluating fullName.
            return this.firstName() + " " + this.lastName();
        }, this);
    }
}