Sample custom KendoUI widget using Typescript - with intellisense niceness. Showing html creation, event handling, public element referencing and subviews (show/hide). Simplicity.

createAppLoginWidget.ts

module createAppLoginWidget {

    declare var kendo;
    declare var ui;
    declare var $;

    var ui = kendo.ui, Widget = ui.Widget

    class AppLoginWidget {

        options = {
            name: "AppLogin",
            currentUserName: ""
        }

        $UserName;
        $Password;
        $CurrentUserName;
        $LoginView;
        $LoggedInView;
        $StatusView;
        subViews;

        showSubView($showSubView) {
            // simple view handler
            this.subViews.forEach(function ($view) { if ($view != $showSubView) $view.hide() });
            $showSubView.show();
        }

        refreshCustomBindings() {
            this.$CurrentUserName.text(this.options.currentUserName);
        }

        doLogout(evt) {
            var widget = <AppLoginWidget>$(evt.target).parents("[data-role]").first().data("handler");
            // some async logout
            widget.showSubView(widget.$StatusView);
            setTimeout(function () {
                widget.options.currentUserName = "";
                widget.showSubView(widget.$LoginView);
            }, 1000);
        }

        doTryLogin(evt) {

            var widget = <AppLoginWidget>$(evt.target).parents("[data-role]").first().data("handler")

            // some async login
            widget.showSubView(widget.$StatusView);
            setTimeout(function () {

                widget.options.currentUserName = widget.$UserName.val();

                widget.$UserName.val("");
                widget.$Password.val("");

                widget.refreshCustomBindings();
                widget.showSubView(widget.$LoggedInView);

            }, 1000);

        }

        init(element, options?) {
            if (typeof (options) == "undefined") options = this.options;
            // base call to widget initialization
            Widget.fn.init.call(this, element, options);

            // Create HTML elements
            // Some are public ("this.$name")

            // Elements are separated into "views" which can be hidden/shown

            //
            // Login view:
            //

            this.$UserName = $("<input>").attr({ type: 'text', placeholder: 'Username' });
            this.$Password = $("<input>").attr({ type: 'password', placeholder: 'Password' });
            var buttonLogin = $("<input>").attr({ type: 'button', value: 'Login' });

            // Attach event
            buttonLogin.on("click", this.doTryLogin);

            this.$LoginView = $("<div>").append([this.$UserName, this.$Password, buttonLogin]);

            //
            // Logged in view:
            //

            this.$CurrentUserName = $("<span>");
            var loggedInAs = $("<span>").text("Logged in as ").append(this.$CurrentUserName);

            var buttonLogout = $("<input>").attr({ type: 'button', value: 'Logout' });
            buttonLogout.on("click", this.doLogout);

            this.$LoggedInView = $("<div>").append([loggedInAs, buttonLogout]);

            //
            // Status view:
            //

            this.$StatusView = $("<div>").text("Wait...");

            // Add views to array and hide all but one
            this.subViews = [this.$LoginView, this.$LoggedInView, this.$StatusView];
            this.showSubView(this.$LoginView);

            // Append to DOM
            $(element).append(this.subViews);
        }

    }


    ui.plugin(Widget.extend(new AppLoginWidget()));

}