JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<input type="checkbox" data-bind="checked: Selected" />

<span data-bind="text: Fullname"></span> is a member of <span data-bind="text: Team"></span> and is <span data-bind="visible: !Selected()">not </span>selected. The Team has <span data-bind="text: Team.Length"></span> members total.

JavaScript

(function (sitrion, core, $) {
    core.Viewer = (function () {
        
        function viewerEntry (parent) {
            var _selected = ko.observable(false);
            this.Team = parent;
            this.Selected = ko.dependentObservable({
                read: function () {
                    return _selected();
                },
                write: function (newValue) {
                    _selected(newValue);
                },
                owner: this
            });
        }
        
        function employee (firstname, lastname) {
            this.Firstname = firstname;
            this.Lastname = lastname;
            this.Fullname = firstname + " " + lastname;
            this.FullnameRev = lastname + ", " + firstname;
        }
        
        function team (title, members) {
            var _members = ko.observableArray(),
                _membersMap = [];
            
            this.Title = title;
            this.toString = function () { return this.Title; };
            // array check taken from knockout 1.3
            if ((members !== null) && (members !== undefined) && !('length' in members)) {
                throw new Error('"members" must be an array, or null, or undefined.');
            }
            this.AddMember = function (member) {
                if (member.constructor != viewerEntry) {
                    throw new Error('Could not add value of type: ' + (member.constructor.name || typeof member));
                }
                _membersMap.push({ index: _members().length, member: member });
                _members.push(member);
                member.Team = this;
            };
            for (var i = 0; i < members.length; i++) {
                this.AddMember(members[i]);
            }
            this.Length = ko.dependentObservable({
                read: function () {
                    return _members().length;
                },
                write: function () {
                    throw 'Cannot...