JSFiddle - React, Tailwind, and code Playground

by jhoguet

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<p data-bind="with:person">
    <span data-bind="text: name, click:$root.personSelected"></span>
</p>

JavaScript

(function() {
    ko.globalCommands = {};
    ko.subscribable.call(ko.globalCommands);

    ko.subscribable.fn.global = function(eventName) {
        this.subscribe(function() {
            ko.globalCommands.notifySubscribers(arguments[0], eventName);
        });
        return this;
    };
    
    ko.subscribableFunction = function() {
        var callback;
        var result = function() {
            callback.apply(result, arguments[0]);
        };
        ko.subscribable.call(result);
        if (typeof(arguments[0]) === 'function') {
            result.subscribe(arguments[0]);
        }
        callback = result.notifySubscribers;
        return result;
    };
})();

var viewModel = {
    personSelected: ko.subscribableFunction().global('person.selected'),
    person: ko.observable({
        name: 'jon'
    }).global('person.changed')
};

ko.applyBindings(viewModel );

//todo: clean up signature - shouldn't have to pass in  null, and event name should come first
ko.globalCommands.subscribe(function(person) {
    alert(person.name+ ' from global person.changed');
}, null, 'person.changed');

ko.globalCommands.subscribe(function(person) {
    alert(person.name+ ' from global person.selected');
}, null, 'person.selected');

//viewModel.person({name: 'ang'});
//viewModel.personSelected({name: 'adam'});

//var y = ko.observable('something').global('person.deleted');