about.html

<h1>About</h1>

app.ts

/// <reference path="../libs/jquery.d.ts" />
/// <reference path="../kendo/typescript/kendo.web.d.ts" />

module app {

    export class MainViewModel extends kendo.data.ObservableObject{
        constructor(public name: string) {
            super();
        }
        displayGreeting() {
            alert("hello " + this.name);
            this.set("name","resetted..");
        }
    }

    export class Views {

        mainLayout: kendo.Layout;

        mainView: kendo.View;
        aboutView: kendo.View;

        mainViewModel: MainViewModel;

        router: kendo.Router;

        initializeRouter() {
            this.router = new kendo.Router();

            this.router.route("/", () => {
                this.mainLayout.showIn("#content", this.mainView);
            });

            this.router.route("/about", () => {
                this.mainLayout.showIn("#content", this.aboutView);
            });

            this.router.start();

        }

        constructor() {

            this.mainViewModel = new MainViewModel("Foo Bar");

            // simple async template loader

            $.when(
                $.get("/views/layout.html"),
                $.get("/views/main.html"),
                $.get("/views/about.html")
                ).done((mainLayout, mainView, aboutView) => {

                    this.mainLayout = new kendo.Layout(mainLayout[0]);
                    this.mainView = new kendo.View(mainView[0], {model:this.mainViewModel});

                    this.aboutView = new kendo.View(aboutView[0]);

                    this.mainLayout.render($("#layoutContainer"));                    

                    this.initializeRouter();

                });


        }



    }
    var views: Views;
    $(() => {
        views = new Views();
    });


}

app_module_style.ts

/*

    Alternative style without using classes

*/

module app {

    var mainViewModel = new kendo.data.ObservableObject({
        name: "Some Name",
        displayGreeting: function(){
            alert("hello " + this.name);
            this.set("name", "another");
        }
    });
    
    var mainLayout: kendo.Layout;
    var mainView: kendo.View;
    var invoiceView: kendo.View;
    var router: kendo.Router;

    $.when(
        $.get("/app/views/layout.html"),
        $.get("/app/views/main.html"),
        $.get("/app/views/invoice.html")
        ).done((mainLayout, mainView, invoiceView) => {

            mainLayout = new kendo.Layout(mainLayout[0]);
            mainView = new kendo.View(mainView[0], { model: mainViewModel });

            invoiceView = new kendo.View(invoiceView[0]);

            mainLayout.render($("#layoutContainer"));
            mainLayout.showIn("#Content", invoiceView);

            router = new kendo.Router();

            router.route("/", () => {
                mainLayout.showIn("#Content", mainView);
            });

            router.route("/invoice", () => {
                mainLayout.showIn("#Content", invoiceView);
            });

            router.start();

        });

}

layout.html

<div class="container">

    <div class="row" id="content">
    </div>

    <hr>

    <a href="#/">home</a>
    <a href="#/about">about</a>


</div>

main.html

<input data-bind="value: name" />
<button data-bind="click: displayGreeting">Display Greeting</button>