JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<script src="//canjs.com/release/2.0.4/can.jquery.js"></script>

JavaScript

// can.Map.delegate plugin included below 
$(function () {
    var Routing = can.Control.extend({
        // tried the following to no avail:
        // -- documentation (scroll to bottom): http://canjs.com/docs/can.route.html
        // '{can.route} id=3'
        // '{can.route} id add'
        // '{can.route} id=3 add'
        // '{can.route} id set'
        // '{can.route} id=3 set'
        // '{can.route} id change'
        '{can.route} id': function (data) {
            console.log("ok", data.attr());
        }
    });

    can.route(":id");
    
    // None of these work as expected
    // documentation: http://canjs.com/docs/can.Map.delegate.html
    can.route.delegate("id", "add", function () {
        console.log('delegate add');
    });
    can.route.delegate("id", "set", function () {
        console.log('delegate set');
    });

    can.route.ready();
    new Routing(document);

    setTimeout(function () {
        console.log('location.hash (before): ', location.hash);
        can.route.attr("id", 3);
        console.log('location.hash (after): ', location.hash);
        
        // location.hash is asynchronous (Chrome)!!
        setTimeout(function () {
            console.log("location.hash (delay): ", location.hash);
        }, 10);
    }, 500);
});




/** can.Map.delegate plugin **/

// ** - 'this' will be the deepest item changed
// * - 'this' will be any changes within *, but * will be the 
//     this returned

// tells if the parts part of a delegate matches the broken up props of the event
// gives the prop to use as 'this'
// - parts - the attribute name of the delegate split in parts ['foo','*']
// - props - the split props of the event that happened ['foo','bar','0']
// - returns - the attribute to delegate too ('foo.bar'), or null if not a match 
var delegateMatches = function (parts, props) {
    //check props parts are the same or 
    var len = parts.length,
        i = 0,
        // keeps the matched props we will use
       ...