diff --git a/modules/attributes.js b/modules/attributes.js index 9a50259..e486bc7 100644 --- a/modules/attributes.js +++ b/modules/attributes.js @@ -1,3 +1,7 @@ +var NamespaceURIs = { + "xlink": "http://www.w3.org/1999/xlink" +}; + var booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare", "default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable", "enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple", @@ -12,7 +16,7 @@ for(var i=0, len = booleanAttrs.length; i < len; i++) { function updateAttrs(oldVnode, vnode) { var key, cur, old, elm = vnode.elm, - oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs; + oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs, namespaceSplit; if (!oldAttrs && !attrs) return; oldAttrs = oldAttrs || {}; @@ -23,11 +27,15 @@ function updateAttrs(oldVnode, vnode) { cur = attrs[key]; old = oldAttrs[key]; if (old !== cur) { - // TODO: add support to namespaced attributes (setAttributeNS) if(!cur && booleanAttrsDict[key]) elm.removeAttribute(key); - else - elm.setAttribute(key, cur); + else { + namespaceSplit = key.split(":"); + if(namespaceSplit.length > 1 && NamespaceURIs.hasOwnProperty(namespaceSplit[0])) + elm.setAttributeNS(NamespaceURIs[namespaceSplit[0]], key, cur); + else + elm.setAttribute(key, cur); + } } } //remove removed attributes diff --git a/test/attributes.js b/test/attributes.js index 1ab372c..532ac42 100644 --- a/test/attributes.js +++ b/test/attributes.js @@ -26,6 +26,11 @@ describe('attributes', function() { assert.strictEqual(elm.getAttribute('minlength'), '0'); assert.strictEqual(elm.getAttribute('value'), 'false'); }); + it('are set correctly when namespaced', function() { + var vnode1 = h('div', {attrs: {'xlink:href': '#foo'}}); + elm = patch(vnode0, vnode1).elm; + assert.strictEqual(elm.getAttributeNS('http://www.w3.org/1999/xlink', 'href'), '#foo'); + }); describe('boolean attribute', function() { it('is present if the value is truthy', function() { var vnode1 = h('div', {attrs: {required: true, readonly: 1, noresize: 'truthy'}});