Initial compatibility changes, targeting IE8

- Replaced use of Object.keys, Array.isArray and Array.prototype.map with
  their Underscore equivalents.
- Fall back to DOM 0 event registration when addEventListener is not
  available.
- Fall back to jQuery.isPlainObject for attribute object check when
  __proto__ is not available.

README.md

@@ -1,15 +1,13 @@
-# DomBuilder
-
-[![Build Status](https://secure.travis-ci.org/creationix/dombuilder.png)](http://travis-ci.org/creationix/dombuilder)
-
+# backbone-dombuilder
 
 Dombuilder is a simple library that makes it easy to generate dom nodes from a JSON-like structure.
 
+This fork makes use of dependencies a Backbone.js app will already have to enable compatibility with IE8.
+
 ## Usage
 
 The module is a single function exported as the global `domBuilder` or through an AMD style module as the `dombuilder` package.
 
-
 ```js
 // Create a hash to store element references
 var $ = {};
@@ -21,7 +19,7 @@ var template = [
       ["#address", "Sunnyvale, California" ]
     ],
     // native event handlers, not a string to be evaled.
-    [".right.column", { onclick: function (evt) { alert("Foo!"); } }, 
+    [".right.column", { onclick: function (evt) { alert("Foo!"); } },
       ["#email", "tim@creationix.com" ],
       ["#bio", "Cool Guy" ]
     ]
@@ -41,7 +39,7 @@ var template = [
   ["p", "Inspect the source (not view source) to see how clean this dom is!"]
 ];
 
-// Calling the function with the template and storage hash will return the root 
+// Calling the function with the template and storage hash will return the root
 // node (or document fragment is there are multiple root nodes).
 var root = domBuilder(template, $);
 ```

dombuilder.js

@@ -18,10 +18,10 @@ function domBuilder(json, refs) {
   if (typeof json === 'string') return document.createTextNode(json);
 
   // Pass through html elements as-is
-  if (json instanceof HTMLElement) return json;
+  if (_.isElement(json)) return json;
 
   // Stringify any other value types
-  if (!Array.isArray(json)) return document.createTextNode(json + "");
+  if (!_.isArray(json)) return document.createTextNode(json + "");
 
   // Empty arrays are just empty fragments.
   if (!json.length) return document.createDocumentFragment();
@@ -38,7 +38,7 @@ function domBuilder(json, refs) {
         node = document.createElement(tag);
         first = true;
         var classes = part.match(CLASS_MATCH);
-        if (classes) node.setAttribute('class', classes.map(stripFirst).join(' '));
+        if (classes) node.setAttribute('class', _.map(classes, stripFirst).join(' '));
         var id = part.match(ID_MATCH);
         if (id) node.setAttribute('id', id[0].substr(1));
         var ref = part.match(REF_MATCH);
@@ -50,7 +50,9 @@ function domBuilder(json, refs) {
     }
 
     // Except the first item if it's an attribute object
-    if (first && typeof part === 'object' && part.__proto__ === Object.prototype) {
+    if (first && typeof part === 'object' && (part.__proto__
+                                              ? part.__proto__ === Object.prototype
+                                              : jQuery.isPlainObject(part))) {
       setAttrs(node, part);
     } else {
       node.appendChild(domBuilder(part, refs));
@@ -61,7 +63,7 @@ function domBuilder(json, refs) {
 };
 
 function setAttrs(node, attrs) {
-  var keys = Object.keys(attrs);
+  var keys = _.keys(attrs);
   for (var i = 0, l = keys.length; i < l; i++) {
     var key = keys[i];
     var value = attrs[key];
@@ -70,15 +72,20 @@ function setAttrs(node, attrs) {
     } else if (key === "css") {
       setStyle(node.style, value);
     } else if (key.substr(0, 2) === "on") {
-      node.addEventListener(key.substr(2), value, false);
+      if (node.addEventListener) {
+        node.addEventListener(key.substr(2), value, false)
+      }
+      else {
+        node[key] = value;
+      }
     } else {
       node.setAttribute(key, value);
     }
   }
 }
 
 function setStyle(style, attrs) {
-  var keys = Object.keys(attrs);
+  var keys = _.keys(attrs);
   for (var i = 0, l = keys.length; i < l; i++) {
     var key = keys[i];
     style[key] = attrs[key];

index.html

@@ -1,10 +1,13 @@
 <!doctype html>
 <html>
 <head>
+<meta charset="utf-8"/>
 <title>Sample App</title>
 <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
+<script src="deps/underscore-1.3.3.min.js"></script>
+<script src="deps/jquery-1.8.1.min.js"></script>
 <script src="dombuilder.js"></script>
 <script>
 

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "dombuilder",
-  "version": "0.1.0",
-  "description": "An easy dombuilder using json-ml style syntax",
+  "name": "backbone-dombuilder",
+  "version": "0.1.0-mod1",
+  "description": "Fork of creationix/dombuilder which uses Backbone.js dependencies for IE8 compatibility",
   "main": "dombuilder.js",
   "scripts": {
     "test": "phantomjs test.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/creationix/dombuilder.git"
+    "url": "https://github.com/insin/backbone-dombuilder.git"
   }
 }