Support for mutiple class names as key (close vuejs#2571)

An Phan · An Phan · commit b496632118d4 · 2016-03-31T07:58:55.000+08:00
This commit adds support for using multiple class names as key when specifying a `:class` object, for example `<div :class="{ 'a b c': flag }">`. Previously, doing so will trigger an uncaught InvalidCharacterError, as spaces are not allowed in DOM tokens. Feature request vuejs#2571 should also be satisfied by this commit.
diff --git a/src/directives/internal/class.js b/src/directives/internal/class.js
@@ -41,19 +41,16 @@ export default {
   },
 
   cleanup (value) {
-    if (this.prevKeys) {
-      var i = this.prevKeys.length
-      while (i--) {
-        var key = this.prevKeys[i]
-        if (!key) continue
-        if (isPlainObject(key)) {
-          var keys = Object.keys(key)
-          for (var k = 0; k < keys.length; k++) {
-            removeClass(this.el, keys[k])
-          }
-        } else {
-          removeClass(this.el, key)
-        }
+    if (!this.prevKeys) return
+
+    var i = this.prevKeys.length
+    while (i--) {
+      var key = this.prevKeys[i]
+      if (!key) continue
+
+      var keys = isPlainObject(key) ? Object.keys(key) : [key]
+      for (var j = 0, l = keys.length; j < l; j++) {
+        toggleClasses(this.el, keys[j], removeClass)
       }
     }
   }
@@ -63,9 +60,8 @@ function setObjectClasses (el, obj) {
   var keys = Object.keys(obj)
   for (var i = 0, l = keys.length; i < l; i++) {
     var key = keys[i]
-    if (obj[key]) {
-      addClass(el, key)
-    }
+    if (!obj[key]) continue
+    toggleClasses(el, key, addClass)
   }
 }
 
@@ -77,3 +73,31 @@ function stringToObject (value) {
   }
   return res
 }
+
+/**
+ * Add or remove a class/classes on an element
+ *
+ * @param {Element} el
+ * @param {String} key The class name. This may or may not
+ *                     contain a space character, in such a
+ *                     case we'll deal with multiple class
+ *                     names at once.
+ * @param {Function} fn
+ */
+
+function toggleClasses (el, key, fn) {
+  key = key.trim()
+
+  if (key.indexOf(' ') === -1) {
+    fn(el, key)
+    return
+  }
+
+  // The key contains one or more space characters.
+  // Since a class name doesn't accept such characters, we
+  // treat it as multiple classes.
+  var keys = key.split(' ')
+  for (var i = 0, l = keys.length; i < l; i++) {
+    fn(el, keys[i])
+  }
+}
diff --git a/test/unit/specs/directives/internal/class_spec.js b/test/unit/specs/directives/internal/class_spec.js
@@ -34,6 +34,16 @@ describe(':class', function () {
     expect(el.className).toBe('hoho b')
     dir.update(null)
     expect(el.className).toBe('hoho')
+
+    dir.update({
+      'a b': true,
+      c: false
+    })
+    expect(el.className).toBe('hoho a b')
+    dir.update({
+      c: true
+    })
+    expect(el.className).toBe('hoho c')
   })
 
   it('array value', function () {
