JSFiddle - React, Tailwind, and code Playground

by antixrist

HTML

<script src="https://rawgithub.com/melanke/Watch.JS/master/src/watch.min.js"></script>
<script src="https://raw.githubusercontent.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<div id="root" class="node" data-template="root.template">
    <span data-text="model.name"></span>
    <ul data-show="model.length">
        <li data-each-child="model.children">
          <div class="node" data-template="child.template"></div>
        </li>
    </ul>
    <div class="buttons">
      <button data-on-click="model.add"> Add node </button>
      <button data-on-click="model.clear" data-show="model.length">Clear nodes</button>
    </div>
</div>

<script type="text/rivets-template" id="tree-template">
    <span data-text="model.name"></span>
    <ul data-show="model.length">
        <li data-each-child="model.children">
          <div class="node" data-template="child.template"></div>
        </li>
    </ul>
    <div class="buttons">
      <button data-on-click="model.add"> Add node </button>
      <button data-on-click="model.clear" data-show="model.length">Clear nodes</button>
    </div>
</script>

CSS

.node {
    float: left;
    border: 1px solid black;
    padding: 5px;
}
li { list-style-type: none; }
.buttons { float: left; clear: both; }

JavaScript

function Node(name) {
    this.name = name;
    this.children = [];
}
Node.prototype.add = function () {
    this.children.push(new Node(this.name + '-child-' + this.children.length));
};
Node.prototype.clear = function () {
    this.children = [];
};
Node.prototype.length = function () {
    return this.children.length;
};
Node.prototype.template = function() { 
    return $('#tree-template').html();
}

rivets.adapters[':'] = {
        subscribe: function (obj, keypath, callback) {
            watch(obj, keypath, callback)
        },
        unsubscribe: function (obj, keypath, callback) {
            unwatch(obj, keypath, callback)
        },
        read: function (obj, keypath) {          
            return obj[keypath];
        },
        publish: function (obj, keypath, value) {
            obj[keypath] = value;
        }
};

root = new Node('root');
root.view = rivets.bind($('#root'), { root: root });