JSFiddle - React, Tailwind, and code Playground

by bschafer

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<p>Id: <span data-bind="text: id"></span></p>
<p>Identifier: <span data-bind="text: identifier"></span></p>
<p>Title: <input data-bind="value: title" /></p>
<button data-bind="click: $root.addStakeholder">Add Stakeholder</button>
<input id="txtAlias" placeholder="Alias"></input>
 <table data-bind="visible: $root.stakeholders().length > 0">
    <thead><tr>
        <th class="colLabel">alias</th>
        <th class="colLabel">type</th>
        <th class="colLabel">primary</th>
        <th></th>
    </tr></thead>
    <tbody data-bind="foreach: stakeholders">
        <tr>
            <td><input data-bind="value:user().tag"></input></td>
            <td><input data-bind="value:role().value"></input></td>
            <td></td>
            <td data-bind="click: $root.removeStakeholder" style="color: #3B3BEB;">delete</td>
        </tr>    
    </tbody>
</table>
<hr />
<div data-bind="text: ko.toJSON($root)"></div>

CSS

* { margin: 10px; }}
.colLabel {
    color: #777;
}

table th {
    padding: 2px 5px;
}
table td {
    padding: 2px 5px;
}

JavaScript

var Stakeholder = function(id, User, Role, primary) {
    var self = this;
    self.id = ko.observable(id);
    self.user = ko.observable(User);
    self.role = ko.observable(Role);
    self.primary = ko.observable(primary);
};

var Lookup = function(lookupid, value) {
    var self = this;
    self.id = lookupid;
    self.value = ko.observable(value);
};

var Roles = function(typeid, role) {
    var self = this;
    self.typeid = ko.observable(typeid);
    self.role = ko.observable(role);
};

var User = function(id, alias, fullname) {
    var self = this;
    self.id = ko.observable(id);
    self.alias = ko.observable(alias);
    self.fullname = ko.observable(fullname);

    self.tag = ko.computed(function() {
        return self.id() + " " + self.alias();
    }, self);

};

var ViewModel = function(id, identifier, title) {
    var self = this;
    self.id = id;
    self.identifier = identifier;
    self.title = ko.observable(title);

    self.stakeholders = ko.observableArray();

    self.stakeholderId = ko.observable(1);
    self.addStakeholder = function() {

        // get a handle on the txtAlias element
        var alias_input = $("#txtAlias");

        // check to see if the txtAlias element has a value
        if (alias_input.val() !== "") {
            var newUser = new Stakeholder(self.stakeholderId(), new User(100, alias_input.val(), "Billy Bob"), new Lookup(1, "Plumber", true));
            self.stakeholders.push(newUser);
            self.stakeholderId(self.stakeholderId() + 1);

            // clear out the alias input value
            alias_input.val("");
        }
    };

    self.removeStakeholder = function(stakeholder) {
        self.stakeholders.remove(stakeholder);
    };
};


ko.applyBindings(new ViewModel(1, "2012-00001", "First Case"));