Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update dombuilder

  • Loading branch information...
commit 10f014f7d0a0a1dc01fe076bf5c75b5e7bccb1c3 1 parent 0b754c6
@creationix creationix authored
Showing with 52 additions and 28 deletions.
  1. +9 −10 dombuilder.js
  2. +30 −18 index.html
  3. +13 −0 style.css
View
19 dombuilder.js
@@ -7,10 +7,7 @@
//////////////////////////////////////
(function () {
- this.domBuilder = function domBuilder(json) {
-
- // Support multiple arguments for flexible API
- if (arguments.length > 1) return domBuilder(arguments);
+ this.domBuilder = function domBuilder(json, refs) {
// Render strings as text nodes
if (typeof json === 'string') return document.createTextNode(json);
@@ -30,6 +27,8 @@
if (classes) node.setAttribute('class', classes.map(stripFirst).join(' '));
var id = part.match(ID_MATCH);
if (id) node.setAttribute('id', id[0].substr(1));
+ var ref = part.match(REF_MATCH);
+ if (refs && ref) refs[ref[0].substr(1)] = node;
continue;
} else {
node = document.createDocumentFragment();
@@ -40,10 +39,9 @@
if (first && typeof part === 'object' && part.__proto__ === Object.prototype) {
setAttrs(node, part);
} else {
- node.appendChild(domBuilder(part));
+ node.appendChild(domBuilder(part, refs));
}
first = false;
-
}
return node;
};
@@ -55,7 +53,7 @@
var value = attrs[key];
if (key === "$") {
value(node);
- } else if (key === "style") {
+ } else if (key === "css") {
setStyle(node.style, value);
} else if (key.substr(0, 2) === "on") {
node.addEventListener(key.substr(2), value, false);
@@ -73,9 +71,10 @@
}
}
- var CLASS_MATCH = /\.[^.#]+/g,
- ID_MATCH = /#[^.#]+/,
- TAG_MATCH = /^[^.#]+/;
+ var CLASS_MATCH = /\.[^.#$]+/g,
+ ID_MATCH = /#[^.#$]+/,
+ REF_MATCH = /\$[^.#$]+/;
+ TAG_MATCH = /^[^.#$]+/;
function stripFirst(part) {
return part.substr(1);
View
48 index.html
@@ -1,26 +1,38 @@
<!doctype html>
<html>
<head>
- <title>Todos App</title>
- <script src="dombuilder.js"></script>
+<title>Sample App</title>
+<link rel="stylesheet" href="style.css"/>
</head>
-<body><script>
- var self = document.querySelector('body script');
- self.parentNode.removeChild(self);
- var root = domBuilder(
- [".profile",
- [".left.column",
- ["#date", new Date().toString() ],
- ["#address", "Sunnyvale, California" ]
- ],
- [".right.column", {onclick:function () {alert("Foo");}},
- ["#email", "tim@creationix.com" ],
- ["#bio", "Cool Guy" ]
- ]
+<body>
+<script src="dombuilder.js"></script>
+<script>
+
+ // Clean body just for fun
+ document.body.innerText = "";
+
+ // Render our new body
+ var $ = {};
+ var root = domBuilder([
+ [".profile",
+ [".left.column",
+ ["#date", new Date().toString() ],
+ ["#address", "Sunnyvale, California" ]
],
- ["hr", {style: {width:"100px",height:"50px"},$: function (hr) { console.log(hr); }}]
- );
- document.body.appendChild(root);
+ [".right.column", {onclick:function () {alert("Foo");}},
+ ["#email", "tim@creationix.com" ],
+ ["#bio", "Cool Guy" ]
+ ]
+ ],
+ [".form",
+ ["input$inputField"],
+ ["button", {onclick: function () { alert($.inputField.value); }}, "Click Me"]
+ ],
+ ["hr", {css: {width:"100px",height:"50px"},$: function (hr) { console.log(hr); }}],
+ ["p", "Inspect the source (not view source) to see how clean this dom is!"]
+ ], $);
+ document.body.appendChild(root);
+
</script></body>
</html>
View
13 style.css
@@ -0,0 +1,13 @@
+.column {
+ display: inline-block;
+ width: 40%;
+}
+.form {
+ clear: both;
+ border: 10px solid #08f;
+ margin: 0;
+ padding: 10px;
+}
+.left { float: left; }
+.right { float: right; }
+
Please sign in to comment.
Something went wrong with that request. Please try again.