From fe960bc2f364537a9e8abfa8b2b83a18a993cd3b Mon Sep 17 00:00:00 2001 From: Jon Eisen Date: Wed, 3 Sep 2014 18:02:52 -0600 Subject: [PATCH 1/6] Dont process removed nodes --- lib/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/index.js b/lib/index.js index 996aaca..3ad7f11 100644 --- a/lib/index.js +++ b/lib/index.js @@ -215,6 +215,9 @@ Reactive.prototype._bind = function() { var bindings = self.bindings; walk(self.el, function(el, next) { + if (!el.parentNode) // Don't process removed nodes + return next() + // element if (el.nodeType == 1) { var skip = false; From 2dfe287f79f4aeb8891c07689ea4f944b5c0699a Mon Sep 17 00:00:00 2001 From: Jon Eisen Date: Wed, 3 Sep 2014 18:08:21 -0600 Subject: [PATCH 2/6] dont interpolate removed text nodes --- lib/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/lib/index.js b/lib/index.js index 3ad7f11..6925af2 100644 --- a/lib/index.js +++ b/lib/index.js @@ -215,9 +215,6 @@ Reactive.prototype._bind = function() { var bindings = self.bindings; walk(self.el, function(el, next) { - if (!el.parentNode) // Don't process removed nodes - return next() - // element if (el.nodeType == 1) { var skip = false; @@ -269,7 +266,7 @@ Reactive.prototype._bind = function() { return next(skip); } // text - else if (el.nodeType == 3) { + else if (el.nodeType == 3 && el.parentNode) { if (utils.hasInterpolation(el.data)) { debug('bind text "%s"', el.data); new TextBinding(self, el); From a70d217be3686bb296d29548587d0d2b7084cb47 Mon Sep 17 00:00:00 2001 From: Jon Eisen Date: Thu, 4 Sep 2014 14:23:21 -0600 Subject: [PATCH 3/6] Add test for data-html replacing text --- test/bindings.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/test/bindings.js b/test/bindings.js index e804248..d392aee 100644 --- a/test/bindings.js +++ b/test/bindings.js @@ -103,3 +103,11 @@ describe('Reactive#bind(name, fn)', function(){ assert(el.value == 'value'); }) }) + +describe('data-html', function () { + it('should replace html content', function(){ + var el = domify('
text to be replaced
'); + var view = reactive(el, { value: '
' }); + assert(el.innerHTML === '
'); + }) +}) From 711e28e9b6877c9f1b1f9b679ca384be997e16da Mon Sep 17 00:00:00 2001 From: Jon Eisen Date: Thu, 4 Sep 2014 14:23:45 -0600 Subject: [PATCH 4/6] Make tests IE9 compatible (type=email doesnt work, so use set/getAttribute) --- test/reactive.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/reactive.js b/test/reactive.js index 0e0bb08..5b545c9 100644 --- a/test/reactive.js +++ b/test/reactive.js @@ -313,15 +313,15 @@ describe('data-replace', function(){ var input = document.createElement('input'); var el = domify('
'); var view = reactive(el, {}, { delegate: { input: input } }); - assert('email' == input.type); + assert('email' == input.getAttribute('type')); }) it('shouldnt wipe out existing attributes', function(){ var input = document.createElement('input'); - input.type = 'url' + input.setAttribute('type', 'url') var el = domify('
'); var view = reactive(el, {}, { delegate: { input: input } }); - assert('url' == input.type); + assert('url' == input.getAttribute('type')); }) it('should carryover classes', function(){ From 7c85d67a42e09c0af18550a540314622e0c80084 Mon Sep 17 00:00:00 2001 From: Jon Eisen Date: Thu, 4 Sep 2014 16:50:59 -0600 Subject: [PATCH 5/6] IE8 Support --- .zuul.yml | 2 +- lib/each.js | 4 ++-- lib/index.js | 13 ++++++++++++- package.json | 9 +++++---- test/adapters.js | 2 ++ test/attr-interpolation.js | 2 ++ test/bindings.js | 10 ++-------- test/each.js | 6 +++++- test/reactive.js | 24 +++++++++++++++++------- test/text-interpolation.js | 2 ++ 10 files changed, 50 insertions(+), 24 deletions(-) diff --git a/.zuul.yml b/.zuul.yml index 82a3c30..4c44d74 100644 --- a/.zuul.yml +++ b/.zuul.yml @@ -9,4 +9,4 @@ browsers: - name: iphone version: latest - name: ie - version: 10..latest + version: 8..latest diff --git a/lib/each.js b/lib/each.js index bc45793..6a70232 100644 --- a/lib/each.js +++ b/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; }; diff --git a/lib/index.js b/lib/index.js index 6925af2..8a7b60a 100644 --- a/lib/index.js +++ b/lib/index.js @@ -266,7 +266,7 @@ Reactive.prototype._bind = function() { return next(skip); } // text - else if (el.nodeType == 3 && el.parentNode) { + 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; + } +} diff --git a/package.json b/package.json index 638036e..cbd2582 100644 --- a/package.json +++ b/package.json @@ -28,13 +28,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" } -} \ No newline at end of file +} diff --git a/test/adapters.js b/test/adapters.js index ad59a0f..3f81725 100644 --- a/test/adapters.js +++ b/test/adapters.js @@ -1,3 +1,5 @@ +require('reactive-ie8-shims'); + var domify = require('domify'); var assert = require('assert'); var Emitter = require('emitter'); diff --git a/test/attr-interpolation.js b/test/attr-interpolation.js index 43f3d5b..4cf6ea3 100644 --- a/test/attr-interpolation.js +++ b/test/attr-interpolation.js @@ -1,3 +1,5 @@ +require('reactive-ie8-shims'); + var domify = require('domify'); var assert = require('assert'); diff --git a/test/bindings.js b/test/bindings.js index d392aee..716f441 100644 --- a/test/bindings.js +++ b/test/bindings.js @@ -1,3 +1,5 @@ +require('reactive-ie8-shims'); + var domify = require('domify'); var assert = require('assert'); @@ -103,11 +105,3 @@ describe('Reactive#bind(name, fn)', function(){ assert(el.value == 'value'); }) }) - -describe('data-html', function () { - it('should replace html content', function(){ - var el = domify('
text to be replaced
'); - var view = reactive(el, { value: '
' }); - assert(el.innerHTML === '
'); - }) -}) diff --git a/test/each.js b/test/each.js index 27a3e0d..d8727b5 100644 --- a/test/each.js +++ b/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']); diff --git a/test/reactive.js b/test/reactive.js index 5b545c9..04d9c81 100644 --- a/test/reactive.js +++ b/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('

'); var user = { name: 'Tobi' }; var view = reactive(el, user); - assert('Tobi' == el.children[0].innerHTML); + assert('tobi' == el.children[0].innerHTML.toLowerCase()); }) it('should support computed values', function(){ @@ -288,7 +290,7 @@ describe('data-checked', function(){ var el = domify('
'); 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('
'); + var el = domify('
'); var view = reactive(el, {}, { delegate: { input: input } }); - assert('email' == input.getAttribute('type')); + assert('foobar' == input.getAttribute('data-value')); }) it('shouldnt wipe out existing attributes', function(){ var input = document.createElement('input'); - input.setAttribute('type', 'url') - var el = domify('
'); + input.setAttribute('data-value','barbaz') + var el = domify('
'); var view = reactive(el, {}, { delegate: { input: input } }); - assert('url' == input.getAttribute('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('
text to be replaced
'); + var view = reactive(el, { value: '
' }); + assert(el.innerHTML.toLowerCase() === '
'); + }) +}) \ No newline at end of file diff --git a/test/text-interpolation.js b/test/text-interpolation.js index e92e2c1..0e240eb 100644 --- a/test/text-interpolation.js +++ b/test/text-interpolation.js @@ -1,3 +1,5 @@ +require('reactive-ie8-shims'); + var domify = require('domify'); var assert = require('assert'); From a189c3761b055608374a982ead522a60a1a1bf57 Mon Sep 17 00:00:00 2001 From: Jon Eisen Date: Fri, 5 Sep 2014 13:03:55 -0600 Subject: [PATCH 6/6] Update ie8 shims --- package.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index cbd2582..43d5123 100644 --- a/package.json +++ b/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",