support namespaced attributes

src/directives/attr.js

@@ -1,20 +1,47 @@
 var _ = require('../util')
 
+// SVG xml namespaces
+var namespaces = {
+  xlink: 'http://www.w3.org/1999/xlink',
+  ev: 'http://www.w3.org/2001/xml-events'
+}
+
 exports.bind = function () {
+  var name = this.arg
+  // check param attributes
   var params = this.vm.$options.paramAttributes
   this.isParam =
     this.el.__vue__ && // only check rootNode for params
     params &&
-    params.indexOf(this.arg) > -1
+    params.indexOf(name) > -1
+  // check namespaced attributes
+  if (this.el.namespaceURI.slice(-3) === 'svg') {
+    var colonIndex = name.indexOf(':')
+    if (colonIndex > 0) {
+      this.localName = name.slice(colonIndex + 1)
+      this.namespace = namespaces[name.slice(0, colonIndex)]
+    }
+  }
 }
 
 exports.update = function (value) {
+  var el = this.el
+  var ns = this.namespace
+  var name = this.arg
   if (value || value === 0) {
-    this.el.setAttribute(this.arg, value)
+    if (ns) {
+      el.setAttributeNS(ns, name, value)
+    } else {
+      el.setAttribute(name, value)
+    }
   } else {
-    this.el.removeAttribute(this.arg)
+    if (ns) {
+      el.removeAttributeNS(ns, this.localName)
+    } else {
+      el.removeAttribute(name)
+    }
   }
   if (this.isParam) {
-    this.vm[this.arg] = _.guardNumber(value)
+    this.vm[name] = _.guardNumber(value)
   }
 }

src/instance/compile.js

@@ -109,7 +109,7 @@ exports._compileAttrs = function (node) {
           value: attr.value
         })
       } else {
-        _.warn('Unknown directive: ' + dirName)
+        _.warn('Failed to resolve directive: ' + dirName)
       }
     } else if (config.interpolate) {
       this._bindAttr(node, attr)
@@ -188,10 +188,22 @@ exports._bindAttr = function (node, attr) {
   if (!tokens) {
     return
   }
-  var expression = tokens.map(expifyToken).join('+')
+  if (tokens.length > 1) {
+    _.warn(
+      'Invalid attribute binding: "' + attr.value + '"' +
+      '\nUse one single interpolation tag in ' +
+      'attribute bindings.'
+    )
+    return
+  }
+  // wrap namespaced attribute so it won't mess up
+  // the directive parser
+  var arg = attr.name.indexOf(':') > 0
+    ? "'" + attr.name + "'"
+    : attr.name
   this._bindDirective(
     'attr',
-    attr.name + ':' + expression,
+    arg + ':' + tokens[0].value,
     node
   )
 }

src/parse/template.js

@@ -2,17 +2,29 @@ var Cache = require('../cache')
 var templateCache = new Cache(100)
 
 var map = {
+  _default : [0, '', ''],
   legend   : [1, '<fieldset>', '</fieldset>'],
   tr       : [2, '<table><tbody>', '</tbody></table>'],
-  col      : [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
-  _default : [0, '', '']
+  col      : [
+    2,
+    '<table><tbody></tbody><colgroup>',
+    '</colgroup></table>'
+  ],
 }
 
 map.td =
-map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>']
+map.th = [
+  3,
+  '<table><tbody><tr>',
+  '</tr></tbody></table>'
+]
 
 map.option =
-map.optgroup = [1, '<select multiple="multiple">', '</select>']
+map.optgroup = [
+  1,
+  '<select multiple="multiple">',
+  '</select>'
+]
 
 map.thead =
 map.tbody =
@@ -29,7 +41,15 @@ map.line =
 map.path =
 map.polygon =
 map.polyline =
-map.rect = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>']
+map.rect = [
+  1,
+  '<svg ' +
+    'xmlns="http://www.w3.org/2000/svg" ' +
+    'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
+    'xmlns:ev="http://www.w3.org/2001/xml-events"' +
+    'version="1.1">',
+  '</svg>'
+]
 
 var TAG_RE = /<([\w:]+)/