output Array in text bindings

vuejs · Feb 14, 2014 · 48e328c · 48e328c
1 parent 9af11d0
commit 48e328c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 33 deletions.
diff --git a/src/compiler.js b/src/compiler.js
@@ -184,21 +184,10 @@ CompilerProto.setupObserver = function () {
 
     // add own listeners which trigger binding updates
     observer
-        .on('get', function (key) {
-            check(key)
-            DepsParser.catcher.emit('get', bindings[key])
-        })
-        .on('set', function (key, val) {
-            observer.emit('change:' + key, val)
-            check(key)
-            bindings[key].update(val)
-        })
-        .on('mutate', function (key, val, mutation) {
-            observer.emit('change:' + key, val, mutation)
-            check(key)
-            bindings[key].pub()
-        })
-
+        .on('get', onGet)
+        .on('set', onSet)
+        .on('mutate', onSet)
+
     // register hooks
     hooks.forEach(function (hook) {
         var fns = options[hook]
@@ -214,6 +203,17 @@ CompilerProto.setupObserver = function () {
         }
     })
 
+    function onGet (key) {
+        check(key)
+        DepsParser.catcher.emit('get', bindings[key])
+    }
+
+    function onSet (key, val, mutation) {
+        observer.emit('change:' + key, val, mutation)
+        check(key)
+        bindings[key].update(val)
+    }
+
     function register (hook, fn) {
         observer.on('hook:' + hook, function () {
             fn.call(compiler.vm, options)
@@ -258,11 +258,15 @@ CompilerProto.observeData = function (data) {
     })
 
     // emit $data change on all changes
-    observer.on('set', function (key) {
+    observer
+        .on('set', onSet)
+        .on('mutate', onSet)
+
+    function onSet (key) {
         if (key !== '$data') {
             $dataBinding.update(compiler.data)
         }
-    })
+    }
 }
 
 /**

diff --git a/src/directive.js b/src/directive.js
@@ -120,14 +120,16 @@ function parseFilter (filter, compiler) {
  *  during initialization.
  */
 DirProto.update = function (value, init) {
-    if (!init && value === this.value && utils.typeOf(value) !== 'Object') return
-    this.value = value
-    if (this._update) {
-        this._update(
-            this.filters
-                ? this.applyFilters(value)
-                : value
-        )
+    var type = utils.typeOf(value)
+    if (init || value !== this.value || type === 'Object' || type === 'Array') {
+        this.value = value
+        if (this._update) {
+            this._update(
+                this.filters
+                    ? this.applyFilters(value)
+                    : value
+            )
+        }
     }
 }
 

diff --git a/src/directives/repeat.js b/src/directives/repeat.js
@@ -119,6 +119,8 @@ module.exports = {
     },
 
     update: function (collection, init) {
+
+        if (collection === this.collection) return
 
         this.reset()
         // attach an object to container to hold handlers

diff --git a/test/functional/fixtures/output-object.html b/test/functional/fixtures/output-object.html
@@ -1,6 +1,7 @@
 <div id="test">
     <p id="data">{{$data}}</p>
     <p id="obj">{{test}}</p>
+    <p id="arr">{{arr}}</p>
 </div>
 
 <script src="../../../dist/vue.js"></script>
@@ -11,7 +12,8 @@
         data: {
             test: {
                 prop: 1
-            }
-        }    
+            },
+            arr: [{a: 1}]
+        }
     })
 </script>
diff --git a/test/functional/specs/output-object.js b/test/functional/specs/output-object.js
@@ -1,33 +1,58 @@
-casper.test.begin('Outputting Objects', 8, function (test) {
+casper.test.begin('Outputting Objects', 15, function (test) {
 
     casper
     .start('./fixtures/output-object.html')
     .then(function () {
-        test.assertSelectorHasText('#data', '{"test":{"prop":1}}')
+        test.assertSelectorHasText('#data', '{"test":{"prop":1},"arr":[{"a":1}]}')
         test.assertSelectorHasText('#obj', '{"prop":1}')
+        test.assertSelectorHasText('#arr', '[{"a":1}]')
     })
     // setting a nested property
     .thenEvaluate(function () {
         test.test.prop = 2
     })
     .then(function () {
-        test.assertSelectorHasText('#data', '{"test":{"prop":2}}')
+        test.assertSelectorHasText('#data', '{"test":{"prop":2},"arr":[{"a":1}]}')
         test.assertSelectorHasText('#obj', '{"prop":2}')
     })
     // setting a nested object
     .thenEvaluate(function () {
         test.test = { hi:3 }
     })
     .then(function () {
-        test.assertSelectorHasText('#data', '{"test":{"hi":3}}')
+        test.assertSelectorHasText('#data', '{"test":{"hi":3},"arr":[{"a":1}]}')
         test.assertSelectorHasText('#obj', '{"hi":3}')
     })
+    // mutating an array
+    .thenEvaluate(function () {
+        test.arr.push({a:2})
+    })
+    .then(function () {
+        test.assertSelectorHasText('#data', '{"test":{"hi":3},"arr":[{"a":1},{"a":2}]}')
+        test.assertSelectorHasText('#arr', '[{"a":1},{"a":2}]')
+    })
+    // no length change mutate an array
+    .thenEvaluate(function () {
+        test.arr.reverse()
+    })
+    .then(function () {
+        test.assertSelectorHasText('#data', '{"test":{"hi":3},"arr":[{"a":2},{"a":1}]}')
+        test.assertSelectorHasText('#arr', '[{"a":2},{"a":1}]')
+    })
+    // swap the array
+    .thenEvaluate(function () {
+        test.arr = [1,2,3]
+    })
+    .then(function () {
+        test.assertSelectorHasText('#data', '{"test":{"hi":3},"arr":[1,2,3]}')
+        test.assertSelectorHasText('#arr', '[1,2,3]')
+    })
     // setting $data
     .thenEvaluate(function () {
-        test.$data = { test: { swapped: true } }
+        test.$data = { test: { swapped: true }, arr:[3,2,1] }
     })
     .then(function () {
-        test.assertSelectorHasText('#data', '{"test":{"swapped":true}}')
+        test.assertSelectorHasText('#data', '{"test":{"swapped":true},"arr":[3,2,1]}')
         test.assertSelectorHasText('#obj', '{"swapped":true}')
     })
     .run(function () {