support objects in v-bind

Author: yyx990803

src/directives/internal/style.js

@@ -2,7 +2,6 @@ var _ = require('../../util')
 var prefixes = ['-webkit-', '-moz-', '-ms-']
 var camelPrefixes = ['Webkit', 'Moz', 'ms']
 var importantRE = /!important;?$/
-var camelRE = /([a-z])([A-Z])/g
 var testEl = null
 var propCache = {}
 
@@ -14,33 +13,33 @@ module.exports = {
     if (typeof value === 'string') {
       this.el.style.cssText = value
     } else if (_.isArray(value)) {
-      this.objectHandler(value.reduce(_.extend, {}))
+      this.handleObject(value.reduce(_.extend, {}))
     } else {
-      this.objectHandler(value)
+      this.handleObject(value || {})
     }
   },
 
-  objectHandler: function (value) {
+  handleObject: function (value) {
     // cache object styles so that only changed props
     // are actually updated.
     var cache = this.cache || (this.cache = {})
-    var prop, val
-    for (prop in cache) {
-      if (!(prop in value)) {
-        this.setProp(prop, null)
-        delete cache[prop]
+    var name, val
+    for (name in cache) {
+      if (!(name in value)) {
+        this.handleSingle(name, null)
+        delete cache[name]
       }
     }
-    for (prop in value) {
-      val = value[prop]
-      if (val !== cache[prop]) {
-        cache[prop] = val
-        this.setProp(prop, val)
+    for (name in value) {
+      val = value[name]
+      if (val !== cache[name]) {
+        cache[name] = val
+        this.handleSingle(name, val)
       }
     }
   },
 
-  setProp: function (prop, value) {
+  handleSingle: function (prop, value) {
     prop = normalize(prop)
     if (!prop) return // unsupported prop
     // cast possible numbers/booleans into strings
@@ -88,7 +87,7 @@ function normalize (prop) {
  */
 
 function prefix (prop) {
-  prop = prop.replace(camelRE, '$1-$2').toLowerCase()
+  prop = _.hyphenate(prop)
   var camel = _.camelize(prop)
   var upper = camel.charAt(0).toUpperCase() + camel.slice(1)
   if (!testEl) {

src/directives/public/bind.js

@@ -74,6 +74,17 @@ module.exports = {
       return
     }
     var attr = this.arg
+    if (this.arg) {
+      this.handleSingle(attr, value)
+    } else {
+      this.handleObject(value || {})
+    }
+  },
+
+  // share object handler with v-bind:class
+  handleObject: require('../internal/style').handleObject,
+
+  handleSingle: function (attr, value) {
     if (inputProps[attr] && attr in this.el) {
       this.el[attr] = value
     }

src/util/lang.js

@@ -156,8 +156,9 @@ exports.stripQuotes = function (str) {
  * @return {String}
  */
 
+var camelizeRE = /-(\w)/g
 exports.camelize = function (str) {
-  return str.replace(/-(\w)/g, toUpper)
+  return str.replace(camelizeRE, toUpper)
 }
 
 function toUpper (_, c) {
@@ -171,9 +172,10 @@ function toUpper (_, c) {
  * @return {String}
  */
 
+var hyphenateRE = /([a-z\d])([A-Z])/g
 exports.hyphenate = function (str) {
   return str
-    .replace(/([a-z\d])([A-Z])/g, '$1-$2')
+    .replace(hyphenateRE, '$1-$2')
     .toLowerCase()
 }
 

test/unit/specs/directives/internal/style_spec.js

@@ -88,6 +88,12 @@ if (_.inBrowser) {
       expect(el.style.getPropertyValue('color')).toBe('blue')
       expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
       expect(el.style.getPropertyValue('padding')).toBeFalsy()
+
+      // handle falsy value
+      dir.update(null)
+      expect(el.style.getPropertyValue('color')).toBeFalsy()
+      expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
+      expect(el.style.getPropertyValue('padding')).toBeFalsy()
     })
 
     it('array of objects', function () {

test/unit/specs/directives/public/bind_spec.js

@@ -1,5 +1,6 @@
 var _ = require('../../../../../src/util')
 var def = require('../../../../../src/directives/public/bind')
+var xlinkNS = 'http://www.w3.org/1999/xlink'
 
 if (_.inBrowser) {
   describe('v-bind', function () {
@@ -39,7 +40,6 @@ if (_.inBrowser) {
     })
 
     it('xlink', function () {
-      var xlinkNS = 'http://www.w3.org/1999/xlink'
       dir.arg = 'xlink:special'
       dir.update('ok')
       expect(el.getAttributeNS(xlinkNS, 'special')).toBe('ok')
@@ -48,5 +48,23 @@ if (_.inBrowser) {
       dir.update(null)
       expect(el.hasAttributeNS(xlinkNS, 'special')).toBe(false)
     })
+
+    it('object format', function () {
+      dir.el = document.createElement('input')
+      dir.update({
+        'test': 'hi',
+        'value': 'what'
+      })
+      expect(dir.el.getAttribute('test')).toBe('hi')
+      expect(dir.el.value).toBe('what')
+      dir.update({
+        'xlink:special': 'ok'
+      })
+      expect(dir.el.hasAttribute('test')).toBe(false)
+      expect(dir.el.value).toBeFalsy()
+      expect(dir.el.getAttributeNS(xlinkNS, 'special')).toBe('ok')
+      dir.update(null)
+      expect(dir.el.hasAttributeNS(xlinkNS, 'special')).toBe(false)
+    })
   })
 }