ReDom experiment

A note on jsfiddle onload settings

by Andy Bulka

HTML

<script src="https://redom.js.org/redom.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ReDom experiment">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>hi</title>
</head>
<body>

<p>
Also see my <a href="https://jsbin.com/lufivuh/edit?html,js,console,output">jsbin version of this</a> which is just the reDom experiment, without all this commentary re onload/nowrap etc.
</p>

<h1>
A note on jsfiddle onload settings
</h1>
<p>
We have html with buttons pointing to functions, and we have html with buttons that are late bound by jquery.  Depending on how javascript "embedding" in jsfiddle is configured (change via the dropdown above the javascript sub-window), we get different results! Note: To see the result of the jsfiddle: look in the inspector for the IFRAME and there is the little world that is created containing my "html" page in an iframe.  A bit tricky to find.

</p>

<h2>
onLoad (the default)
</h2>


<p>
The traditional html buttons (see below) won't work - you will see <i>ReferenceError: Can't find variable: myFunction"</i> in the console. The javascript script is appended at some future point, via the onLoad event - which means the buttons defined in html, which refer to functions, are referring to functions that haven't been loaded yet. See 
<a href="https://stackoverflow.com/questions/9114747/onclick-event-not-firing-on-jsfiddle-net">stack overflow</a> and 
<a href="https://stackoverflow.com/questions/31946528/simple-onload-doesnt-work-in-jsfiddle">another stack overflow discussion</a> and
<a href="https://stackoverflow.com/questions/9114747/onclick-event-not-firing-on-jsfiddle-net">the most popular hit discussion</a>. 
</p>
<p>
The late jquery bound buttons DO work because they are bound later by the javascript jquery calls.  The ReDom stuff works because the dom is ready by that time, and my redom experiment code runs after the onLoad event injects the javascript into the...

JavaScript

//$(document).ready(function () {
const {
  el,
  mount,
  text
} = redom;
const hello = text('hello');
const hello2 = el('h1', 'Hello RE:DOM!');
mount(document.body, hello);
mount(document.body, hello2);
hello.textContent = 'hi there andy!';

class B {
  constructor() {
    this.el = el('b', 'boldness');
  }
}
let b = new B()
let b1 = new B()
let b2 = new B()
let x = el('p', 'fred ',
  b, ' more ', b1, ' - ', b2
)
mount(document.body, x);
b.el.textContent = 'hi there andy!';

function redomUpdate1() {
  b2.el.textContent = 'a button click caused this!';
}

function alerthello() {
  alert("Hello");
}
b2.el.textContent = 'updating is fast';
$("#fred").on("click", function(e) { console.log("hi"); alert("jj") })
$("#update2").on("click", function(e) {b2.el.textContent = 'a jquery button click caused this!'; })

//})