JSFiddle - React, Tailwind, and code Playground

by no1_melman

HTML

<!-- Todo: Create UI -->
<ul data-bind="foreach: folders" class="folders">
    <li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li>
</ul>
<!-- Mails grid -->
<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>
<!-- Chosen mail -->
<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" />
</div>

CSS

.viewMail {
    display:none;
}

JavaScript

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];

    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();
    self.chosenMailData = ko.observable();

    // Behaviours
    self.goToFolder = function (folder) {
        self.chosenFolderId(folder);
        self.chosenMailData(null); // Stop showing a mail
        $.get('/mail', {
            folder: folder
        }, self.chosenFolderData);
    };
    self.goToMail = function (mail) {
        self.chosenFolderId(mail.folder);
        self.chosenFolderData(null); // Stop showing a folder
        $.get("/mail", {
            mailId: mail.id
        }, self.chosenMailData);
    };

    // Show inbox by default
    self.goToFolder('Inbox');
};

ko.applyBindings(new WebmailViewModel());

var mails = {
    'Indox': {
        "id": "Inbox",
        "mails": [{
            "id": 1,
            "from": "Abbot \[email protected]\u003e",
            "to": "[email protected]",
            "date": "May 25, 2011",
            "subject": "Booking confirmation #389629244",
            "folder": "Inbox"
        }, {
            "id": 2,
            "from": "Addison Begoat \[email protected]\u003e",
            "to": "[email protected]",
            "date": "May 7, 2011",
            "subject": "FW: Associate advice",
            "folder": "Inbox"
        }, {
            "id": 3,
            "from": "Allistair \[email protected]\u003e",
            "to": "[email protected]",
            "date": "May 19, 2011",
            "subject": "RE: Phone call tomorrow 5 o\u0027clock",
            "folder": "Inbox"
        }, {
            "id": 4,
            "from": "[email protected]",
            "to": "[email protected]",
            "date": "May 22, 2011",
            "subject": "Completing basketball project",
            "folder": "Inbox"
        }, {
            "id": 5,
           ...