JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/451097/twitter-bootstrap/css/bootstrap.css">
<script src="http://dl.dropbox.com/u/451097/twitter-bootstrap/Scripts/jquery-1.7.1.js"></script>
<script src="http://dl.dropbox.com/u/451097/twitter-bootstrap/Scripts/bootstrap.js"></script>
<script src="http://dl.dropbox.com/u/451097/twitter-bootstrap/Scripts/bootstrap-modal.js"></script>
<ul data-bind="foreach: Users">
<li>
    <span data-bind="text: Name"></span>
    <a href="#" data-bind="click: $parent.EditUser">Edit user</a>
</li>
</ul>

    <div data-bind="modal: EditingUser" class="modal hide fade in">
        <form data-bind="submit: $parent.SaveUser">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>
                Editing user</h3>
        </div>
        <div class="modal-body">
            <label>
                Name:</label>
            <input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" />
        </div>
        <div class="modal-footer">
             <a href="#" class="btn btn-primary" data-bind="click: $parent.SaveUser">Save changes</a>
        </div>
        </form>
    </div>

JavaScript

ko.bindingHandlers['modal'] = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var allBindings = allBindingsAccessor();
        var $element = $(element);
        $element.addClass('hide modal');

        if (allBindings.modalOptions) {
            if (allBindings.modalOptions.beforeClose) {
                $element.on('hide', function() {
                    return allBindings.modalOptions.beforeClose();
                });
            }
        }

        return ko.bindingHandlers['with'].init.apply(this, arguments);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        var returnValue = ko.bindingHandlers['with'].update.apply(this, arguments);

        if (value) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }

        return returnValue;
    }
};

var User = function(name) {
    var self = this;
    self.Name = ko.observable(name);
}

var ViewModel = function() {
    var self = this;
    self.Users = ko.observableArray();
    self.EditingUser = ko.observable();
    self.EditUser = function(user) {
        self.EditingUser(user);
    };
    self.SaveUser = function() {
        self.EditingUser(undefined);
    }

    for (var i = 1; i <= 10; i++) {
        self.Users.push(new User('User ' + i));
    }
}

ko.applyBindings(new ViewModel());