JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

JavaScript

var SubPub = new Events;

function channel(fns) {
    var chan = {fns: fns || []};
    chan.give = channel.give.bind(chan);
    chan.take = channel.take.bind(chan);
    return chan;
}

channel.give = function() {
    var self = this
    self.fns.forEach(function(fn) {
        fn.apply(val, arguments);
    })
}
channel.take = function(fn) {
    var args = arguments, i = 0;
    for(i = 0; i < args.length; i ++) this.fns.push(args[i]);
}

var Thing1 = {
    channels: {
         ready: channel()
        ,data: channel()
    }
    ,tmpl: '\
        <h1><%=title%></h1>\
    '
    ,initialize: function () {
        var self = this
        self.container = doc.createElement('div')
        
        self.channels.ready.take(function (json) {
            self.container.set('html', compile(self.tmpl, json))
        })
        
        this.getData('/path/to/json', function (json) {
              self.channels.give(json)
        })
    }
    ,getData: function (url, callback) {
        var self = this            
        requestJson(url, function (json) {
            self.channels.data.give(json)
            callback && callback(json)
        })
    }
    ,toElement: function  () {
        return this.container   
    }
}
    
Thing1.channels.ready.take(function (){
    SubPub.fireEvent('thing.ready', Thing1)
})
    
var Thing2 = {
    initialize: function () {
        var self = this   
        var container = self.container = new Element('div')
        
        SubPub.addEvent('thing.ready', function (theThing) {
          container.adopt(theThing)
        })

        window.addEvent('domready', function () {
            document.body.adopt(container)
        })
    }
}