Unfortunately, this is pure HTML hosting, so it isn't possible to properly show this tutorial. Code is below, for interactive version please go to http://learn.knockoutjs.com/#/?tutorial=webmail
Also, you can see generated javascript using developer tools of your preferred browser
namespace MVCTest { [ViewModel] public class SPAViewModel { [Record] public class Mail { public Id : int { get; set; } public From : string { get; set; } public To : string { get; set; } public Date : string { get; set; } public Subject : string { get; set; } public MessageContent : string { get; set; } public Folder : string { get; set; } } [Record] public class FolderData { public Id : string { get; set; } public Mails : IEnumerable[Mail] { get; set; } } public Folders : List[string] { get; set; } public ChosenFolderId : int { get; set; } public ChosenFolderData : int { get; set; } public ChosenMailData : int { get; set; } public this() { Folders = ["Inbox", "Archive", "Sent", "Spam"].ToList(); js self = this; js <# Sammy(function() { this.get("#:folder", function() { self.ChosenFolderId(this.params.folder); self.ChosenMailData(null); $.get("/SPAViewModel/Folder", { folder: this.params.folder }, function(result) { self.ChosenFolderData(ToTypedObject(result)) }); }); this.get("#:folder/:mailId", function() { self.ChosenFolderId(this.params.folder); self.ChosenMailData(null); $.get("/SPAViewModel/Mail", { mailId: this.params.mailId }, function(result) { self.ChosenMailData(ToTypedObject(result)) }); }); this.get('', function() { this.app.runRoute('get', '#Inbox') }); }).run(); #>; } public GoToFolder(folder : int) : void { js location.hash = folder; } public GoToMail(mail : Mail) : void { js location.hash = mail.Folder() + '/' + mail.Id(); } public class Server { allMail : list[Mail] = [ Mail(1, "Abbot \u003coliver@smoke-stage.xyz\u003e", "steve@example.com", "May 25, 2011", "Booking confirmation #389629244", "", "Inbox"), Mail(2, "Addison Begoat \u003cupton.oprdrusson@pear-income.xyz\u003e", "steve@example.com", "May 7, 2011", "FW: Associate advice", "", "Inbox"), Mail(3, "Allistair \u003cleroy72@plane-railway.xyz\u003e", "steve@example.com", "May 19, 2011", "RE: Phone call tomorrow 5 o\u0027clock", "", "Inbox"), Mail(4, "(archived) Abbot \u003coliver@smoke-stage.xyz\u003e", "steve@example.com", "May 25, 2011", "Booking confirmation #389629244", "", "Archive"), Mail(5, "(archived) Addison Begoat \u003cupton.oprdrusson@pear-income.xyz\u003e", "steve@example.com", "May 7, 2011", "FW: Associate advice", "", "Archive") ]; public Folder(folder : string) : FolderData { FolderData(folder, allMail.Where(m => m.Folder == folder)); } public Mail(mailId : int) : Mail { allMail.FirstOrDefault(m => m.Id == mailId); } } } public partial module Views { [View()] public SPAView(viewModel : SPAViewModel) : string { _ = viewModel; <# <div xmlns=""> <ul class="folders" data-bind="foreach: Folders"> <li data-bind="text: $data, css: { selected: $data == $root.ChosenFolderId() }, click: $root.GoToFolder"> </li> </ul> <table class="mails" data-bind="with: ChosenFolderData"> <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead> <tbody data-bind="foreach: Mails"> <tr data-bind="click: $root.GoToMail"> <td data-bind="text: From"> </td> <td data-bind="text: To"> </td> <td data-bind="text: Subject"> </td> <td data-bind="text: Date"> </td> </tr> </tbody> </table> <div class="viewMail" data-bind="with: ChosenMailData"> <div class="mailInfo"> <h1 data-bind="text: Subject"> </h1> <p><label>From</label>: <span data-bind="text: From"> </span></p> <p><label>To</label>: <span data-bind="text: To"> </span></p> <p><label>Date</label>: <span data-bind="text: Date"> </span></p> </div> <p class="message" data-bind="html: MessageContent"> </p> </div> </div> #> } } }