JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.23/Bacon.min.js"></script>
<ul>
    <li id="hello">Hello</li>
    <li id="world">World</li>
</ul>

JavaScript

// Create stream from source
var ulclickstream = Bacon.fromBinder(function(sink) {
    var uls = document.getElementsByTagName("ul");
    uls[0].addEventListener('click', sink);
    return function() {
        return Bacon.noMore
    }
});

// Prints whenever new event on the stream
/*ulclickstream.onValue(function(val){
    console.log(val);
});*/

// create a property out of stream
var property = ulclickstream.toProperty();

// Verify property updated
/*property.onValue(function(val){
  console.log(val);  
});*/

// create a template
var eventInfoTemplate = Bacon.combineTemplate({
    someConstant: 3, // const
    timestamp: (new Date()), // evaluated only once
    userid: property // stream as property
});

// pass that template
eventInfoTemplate.onValue(function(val){
    console.log(val);
});