Make Observer emit set for all parent objects too

Author: Evan You

src/compiler.js

@@ -96,7 +96,7 @@ function Compiler (vm, options) {
     extend(data, vm)
 
     // observe the data
-    Observer.observe(data, '', compiler.observer)
+    compiler.observeData(data)
 
     // for repeated items, create an index binding
     // which should be inenumerable but configurable
@@ -106,21 +106,6 @@ function Compiler (vm, options) {
         compiler.createBinding('$index')
     }
 
-    // allow the $data object to be swapped
-    Object.defineProperty(vm, '$data', {
-        enumerable: false,
-        get: function () {
-            return compiler.data
-        },
-        set: function (newData) {
-            var oldData = compiler.data
-            Observer.unobserve(oldData, '', compiler.observer)
-            compiler.data = newData
-            Observer.copyPaths(newData, oldData)
-            Observer.observe(newData, '', compiler.observer)
-        }
-    })
-
     // now parse the DOM, during which we will create necessary bindings
     // and bind the parsed directives
     compiler.compile(el, true)
@@ -242,6 +227,44 @@ CompilerProto.setupObserver = function () {
     }
 }
 
+CompilerProto.observeData = function (data) {
+
+    var compiler = this,
+        observer = compiler.observer
+
+    // recursively observe nested properties
+    Observer.observe(data, '', observer)
+
+    // also create binding for top level $data
+    // so it can be used in templates too
+    var $dataBinding = compiler.bindings['$data'] = new Binding(compiler, '$data')
+    $dataBinding.update(data)
+
+    // allow $data to be swapped
+    Object.defineProperty(compiler.vm, '$data', {
+        enumerable: false,
+        get: function () {
+            compiler.observer.emit('get', '$data')
+            return compiler.data
+        },
+        set: function (newData) {
+            var oldData = compiler.data
+            Observer.unobserve(oldData, '', observer)
+            compiler.data = newData
+            Observer.copyPaths(newData, oldData)
+            Observer.observe(newData, '', observer)
+            compiler.observer.emit('set', '$data', newData)
+        }
+    })
+
+    // emit $data change on all changes
+    observer.on('set', function (key) {
+        if (key !== '$data') {
+            $dataBinding.update(compiler.data)
+        }
+    })
+}
+
 /**
  *  Compile a DOM node (recursive)
  */
@@ -463,7 +486,6 @@ CompilerProto.bindDirective = function (directive) {
         compiler = compiler || this
         binding = compiler.bindings[key] || compiler.createBinding(key)
     }
-
     binding.instances.push(directive)
     directive.binding = binding
 
@@ -567,11 +589,10 @@ CompilerProto.defineExp = function (key, binding) {
  */
 CompilerProto.defineComputed = function (key, binding, value) {
     this.markComputed(binding, value)
-    var def = {
+    Object.defineProperty(this.vm, key, {
         get: binding.value.$get,
         set: binding.value.$set
-    }
-    Object.defineProperty(this.vm, key, def)
+    })
 }
 
 /**

src/directive.js

@@ -120,7 +120,7 @@ function parseFilter (filter, compiler) {
  *  during initialization.
  */
 DirProto.update = function (value, init) {
-    if (!init && value === this.value) return
+    if (!init && value === this.value && utils.typeOf(value) !== 'Object') return
     this.value = value
     if (this._update) {
         this._update(

src/observer.js

@@ -266,6 +266,8 @@ function observe (obj, rawPath, observer) {
         },
         set: function (key, val) {
             observer.emit('set', path + key, val)
+            // also notify observer that the object itself chagned
+            if (rawPath) observer.emit('set', rawPath, obj)
         },
         mutate: function (key, val, mutation) {
             // if the Array is a root value