JSFiddle - React, Tailwind, and code Playground

by chiru_neeru

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
Folder: <span data-bind="text: FolderName" />
<br />

Folder Groups: <br />
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
    <tbody data-bind="foreach: FolderGroups">
        <tr>
            <td><span data-bind="text: FolderName" /></td>
            <td><span data-bind="text: GroupName" /></td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {

    /* Start: Data */

    var FolderGroup = function (folderName, groupName) {
        this.FolderName = ko.observable(folderName);
        this.GroupName = ko.observable(groupName);
    };

    var viewModel = {
        /* Document Data */
        FolderName: ko.observable("Folder Name here..."),
        FolderGroups: ko.observableArray(MapFolderGroups())
    };

    function MapFolderGroups() {
        var data = [
          MapFolderGroup("folder 1", "group 1"),
          MapFolderGroup("folder 2", "group 2"),                             
          MapFolderGroup("folder 3", "group 3")
                             ];
        return data;
    }

    function MapFolderGroup(folderName, groupName) {
        return new FolderGroup(folderName, groupName);
    }

alert(viewModel.FolderGroups().length);
    ko.applyBindings(viewModel);


    /*End: Methods */
});