IE8 Support

.zuul.yml

@@ -9,4 +9,4 @@ browsers:
   - name: iphone
     version: latest
   - name: ie
-    version: 10..latest
+    version: 8..latest

lib/each.js

@@ -132,7 +132,7 @@ module.exports = function(el, val) {
             var args = Array.prototype.slice.apply(arguments);
             var len = arr.length;
 
-            var splice_args = [len, 0].concat(args)
+            var splice_args = [len, 0].concat(args);
             splice.apply(arr, splice_args);
             return arr.length;
         };
@@ -141,7 +141,7 @@ module.exports = function(el, val) {
             var args = Array.prototype.slice.apply(arguments);
             var len = arr.length;
 
-            var splice_args = [0, 0].concat(args)
+            var splice_args = [0, 0].concat(args);
             splice.apply(arr, splice_args);
             return arr.length;
         };

lib/index.js

@@ -266,7 +266,7 @@ Reactive.prototype._bind = function() {
       return next(skip);
     }
     // text
-    else if (el.nodeType == 3) {
+    else if (el.nodeType == 3 && inDomTree(el)) {
       if (utils.hasInterpolation(el.data)) {
         debug('bind text "%s"', el.data);
         new TextBinding(self, el);
@@ -338,3 +338,14 @@ Reactive.prototype.use = function(fn) {
   fn(this);
   return this;
 };
+
+
+function inDomTree(el) {
+  try {
+    return !!el.parentNode;
+  } catch (e) {
+    if (e.message == 'Invalid argument.') // IE8 is dumb
+      return false;
+    throw e;
+  }
+}

package.json

@@ -12,13 +12,14 @@
   ],
   "main": "lib/index.js",
   "dependencies": {
+    "carry": "0.0.1",
     "classes-component": "1.1.3",
+    "debug": "0.7.4",
+    "domify": "1.2.1",
+    "emitter-component": "1.1.1",
     "event-component": "0.1.0",
     "query-component": "0.0.1",
-    "emitter-component": "1.1.1",
-    "domify": "1.2.1",
-    "carry": "0.0.1",
-    "debug": "0.7.4"
+    "reactive-ie8-shims": "^0.1.2"
   },
   "browser": {
     "classes": "classes-component",
@@ -28,13 +29,14 @@
     "clone": "clone-component"
   },
   "devDependencies": {
-    "zuul": "~1.5.4",
-    "clone-component": "component/clone#acfb79aa",
     "better-assert": "~1.0.0",
-    "mocha": "~1.17.0"
+    "clone-component": "component/clone#acfb79aa",
+    "mocha": "~1.17.0",
+    "reactive-ie8-shims": "^0.1.1",
+    "zuul": "~1.5.4"
   },
   "scripts": {
     "test": "zuul -- test/*.js",
     "test-local": "zuul --local -- test/*.js"
   }
-}
+}

test/adapters.js

@@ -1,3 +1,5 @@
+require('reactive-ie8-shims');
+
 var domify = require('domify');
 var assert = require('assert');
 var Emitter = require('emitter');

test/attr-interpolation.js

@@ -1,3 +1,5 @@
+require('reactive-ie8-shims');
+
 var domify = require('domify');
 var assert = require('assert');
 

test/bindings.js

@@ -1,3 +1,5 @@
+require('reactive-ie8-shims');
+
 var domify = require('domify');
 var assert = require('assert');
 

test/each.js

@@ -1,3 +1,5 @@
+require('reactive-ie8-shims');
+
 var domify = require('domify');
 var assert = require('assert');
 
@@ -55,7 +57,9 @@ describe('each', function(){
     assert.equal(el.children[0].textContent, 'candy');
 
     view.destroy();
-    assert.equal(el.parentNode, undefined);
+    assert.equal(el.parentElement, undefined);
+    // IE8 puts a document fragment above the element
+    assert(!el.parentNode || el.parentNode.nodeType === 11);
 
     // this should have no effect on the children anymore
     view.set('todos', ['milk', 'cereal']);

test/reactive.js

@@ -1,3 +1,5 @@
+require('reactive-ie8-shims');
+
 var classes = require('classes');
 var domify = require('domify');
 var assert = require('assert');
@@ -188,7 +190,7 @@ describe('data-html', function(){
     var el = domify('<div><p data-html="name"></p></div>');
     var user = { name: '<strong>Tobi</strong>' };
     var view = reactive(el, user);
-    assert('<strong>Tobi</strong>' == el.children[0].innerHTML);
+    assert('<strong>tobi</strong>' == el.children[0].innerHTML.toLowerCase());
   })
 
   it('should support computed values', function(){
@@ -288,7 +290,7 @@ describe('data-checked', function(){
     var el = domify('<div><input data-checked="agree" /></div>');
     var user = { agree: false };
     var view = reactive(el, user);
-    assert(null == el.children[0].getAttribute('checked'));
+    assert(!el.children[0].getAttribute('checked')); // IE8 returns "", modern returns null
   })
 })
 
@@ -311,17 +313,17 @@ describe('data-replace', function(){
 
   it('should carryover attributes', function(){
     var input = document.createElement('input');
-    var el = domify('<div><div type="email" data-replace="input"></div>');
+    var el = domify('<div><div data-value="foobar" data-replace="input"></div>');
     var view = reactive(el, {}, { delegate: { input: input } });
-    assert('email' == input.type);
+    assert('foobar' == input.getAttribute('data-value'));
   })
 
   it('shouldnt wipe out existing attributes', function(){
     var input = document.createElement('input');
-    input.type = 'url'
-    var el = domify('<div><div type="email" data-replace="input"></div>');
+    input.setAttribute('data-value','barbaz')
+    var el = domify('<div><div data-value="foobar" data-replace="input"></div>');
     var view = reactive(el, {}, { delegate: { input: input } });
-    assert('url' == input.type);
+    assert('barbaz' == input.getAttribute('data-value'));
   })
 
   it('should carryover classes', function(){
@@ -341,3 +343,11 @@ describe('data-[attr]', function(){
     assert('Tobi' == el.children[0].value);
   })
 })
+
+describe('data-html', function () {
+  it('should replace html content', function(){
+    var el = domify('<div data-html="value">text to be replaced</div>');
+    var view = reactive(el, { value: '<div data-html="value"></div>' });
+    assert(el.innerHTML.toLowerCase() === '<div data-html="value"></div>');
+  })
+})

test/text-interpolation.js

@@ -1,3 +1,5 @@
+require('reactive-ie8-shims');
+
 var domify = require('domify');
 var assert = require('assert');