Test Knockout JS

A bunch of tests on Knockout

by bakhshi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/TutorialSpecific/webmail.css">
<ul class="folders" data-bind="foreach: folders">
    <li data-bind="text:$data,css:{selected:$data == $root.selectedFolder()},click:$root.gotoFolder"></li>
</ul>
<!-- Mails grid -->
<table class="mails" data-bind="with: folderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: mails">
        <tr>
            <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>

JavaScript

/***
    Trying Knockout JS
     we now have list of passengers which is editable and we can select the meal which updates the price
     - let's do some formatting
     - let's add a remove button
     - we now have a reservation counter too
     - let's play more with this page (enable and disable add button based on predefined limit)
     - now let's start to work more on single page apps
     - now let's display a list of emails
***/
function WebMailApp()
{
    var self = this;
    self.folders = ["inbox", "sent", "draft", "spam"];
    self.selectedFolder = new ko.observable();
    self.folderData = new ko.observable();
    
    self.gotoFolder = function(foldername){
        self.selectedFolder(foldername);
        $.get("http://learn.knockoutjs.com/mail", {folder:foldername}, self.folderData);
    }
}

ko.applyBindings(new WebMailApp());