JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="http://canjs.com/release/latest/can.jquery.js"></script>
<script type="text/mustache" id="splittest">
    
    <div>{{para_split text}}</div>
    
</script>

CSS

.bordered {
    border : 1px solid red;
}

JavaScript

Mustache.registerHelper("para_split", function(text, options) {
    return function(el) {
        var $el = $(el), $parent = $el.parent();
        // wait for the element to be in the DOM.
        $el.bind("inserted", function() {
            // now set up a live area, with a compute bound to the
            //  text compute that resolves to the markup we want to add.
            can.view.live.html(el, can.compute(function() {
                var t = text;
                //here we call the original compute that resolves to our
                // markup.  At this point all raw markup should be created.
                
                // If you are calling options.fn(), live areas will be
                // hooked up a few lines later at the $("<div>" + t... 
                //  stage.
                while(typeof t === "function") {
                    t = t();
                }
            //set up the temp parent and the first bordered section.
            var $d = $("<div><div class='bordered'></div></div>");
            //the parent may already have markup.  check its previous height
            var extheight = $parent.height();
            // for each new item we want to add...
            $("<div>" + t + "</div>")
            .children()
            .each(function(i, child) {
               //first take our current section and append it to the parent
                // the parent is in the DOM already, so adding content
                //  will cause reflow and a change to its height.
                $d.children().last()
                .append(child)
                .detach().appendTo($parent);
                if($parent.height() > 200 + extheight) {
                    // make a new bordered div if the most recently
                    // added child caused the current one's height to
                    // exceed the threshhold.
                    $(child).detach();
                    $parent.children().last().detach().appendTo($d);
                  ...