demos/diff-patch.html

<!doctype html>
<html>
<head>
	<title>domvm - diff / patch optim</title>
</head>
<body>
	<script src="../dist/nano/domvm.nano.js"></script>

	<script>
		var el = domvm.defineElement;

		var idle = false;

		function View(vm) {
			return {
				diff: {
					vals: function(vm) {
						return {idle: idle};
					},
					then: function(vm, o, n) {
						if (o.idle != n.idle) {
							if (n.idle)
								vm.node.patch({class: "yyy", style: "display: none;"});
							else
								vm.node.patch({class: "xxx", style: "display: block;"});

							return false;
						}
					}
				},
				render: function() {
					return el(".moo", "HI");
				}
			};
		}

		var vm = domvm.createView(View).mount(document.body);

		setTimeout(function() {
			idle = true;
			vm.redraw();
		}, 1000);

		setTimeout(function() {
			idle = false;
			vm.redraw();
		}, 3000);
	</script>
</body>
</html>