Release-v0.7.6

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "vue",
-    "version": "0.7.5",
+    "version": "0.7.6",
     "main": "dist/vue.js",
     "description": "Simple, Fast & Composable MVVM for building interative interfaces",
     "authors": ["Evan You <yyx990803@gmail.com>"],

component.json

@@ -1,6 +1,6 @@
 {
     "name": "vue",
-    "version": "0.7.5",
+    "version": "0.7.6",
     "main": "src/main.js",
     "author": "Evan You <yyx990803@gmail.com>",
     "description": "Simple, Fast & Composable MVVM for building interative interfaces",

dist/vue.js

@@ -1,5 +1,5 @@
 /*
- VueJS v0.7.5
+ VueJS v0.7.6
  (c) 2014 Evan You
  License: MIT
 */
@@ -603,13 +603,10 @@ var config    = require('./config'),
     console   = window.console,
     ViewModel // late def
 
-// PhantomJS doesn't support rAF, yet it has the global
-// variable exposed. Use setTimeout so tests can work.
-var defer = navigator.userAgent.indexOf('PhantomJS') > -1
-    ? window.setTimeout
-    : (window.webkitRequestAnimationFrame ||
-        window.requestAnimationFrame ||
-        window.setTimeout)
+var defer =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.setTimeout
 
 /**
  *  Create a prototype-less object
@@ -1145,20 +1142,24 @@ CompilerProto.compileNode = function (node) {
  *  Compile a text node
  */
 CompilerProto.compileTextNode = function (node) {
+
     var tokens = TextParser.parse(node.nodeValue)
     if (!tokens) return
-    var el, token, directive
+    var el, token, directive, partial, partialId, partialNodes
+
     for (var i = 0, l = tokens.length; i < l; i++) {
         token = tokens[i]
         if (token.key) { // a binding
             if (token.key.charAt(0) === '>') { // a partial
-                var partialId = token.key.slice(1).trim(),
-                    partial = this.getOption('partials', partialId)
+                partialId = token.key.slice(1).trim()
+                partial = this.getOption('partials', partialId)
                 if (partial) {
                     el = partial.cloneNode(true)
-                    this.compileNode(el)
+                    // save an Array reference of the partial's nodes
+                    // so we can compile them AFTER appending the fragment
+                    partialNodes = slice.call(el.childNodes)
                 }
-            } else { // a binding
+            } else { // a real binding
                 el = document.createTextNode('')
                 directive = Directive.parse('text', token.key, this, el)
                 if (directive) {
@@ -1168,7 +1169,20 @@ CompilerProto.compileTextNode = function (node) {
         } else { // a plain string
             el = document.createTextNode(token)
         }
+
+        // insert node
         node.parentNode.insertBefore(el, node)
+
+        // compile partial after appending, because its children's parentNode
+        // will change from the fragment to the correct parentNode.
+        // This could affect directives that need access to its element's parentNode.
+        if (partialNodes) {
+            for (var j = 0, k = partialNodes.length; j < k; j++) {
+                this.compile(partialNodes[j])
+            }
+            partialNodes = null
+        }
+
     }
     node.parentNode.removeChild(node)
 }
@@ -1332,9 +1346,7 @@ CompilerProto.markComputed = function (binding) {
         vm    = this.vm
     binding.isComputed = true
     // bind the accessors to the vm
-    if (binding.isFn) {
-        binding.value = utils.bind(value, vm)
-    } else {
+    if (!binding.isFn) {
         value.$get = utils.bind(value.$get, vm)
         if (value.$set) {
             value.$set = utils.bind(value.$set, vm)
@@ -3164,6 +3176,7 @@ module.exports = {
 
         var compiler = this.compiler,
             event    = this.arg,
+            isExp    = this.binding.isExp,
             ownerVM  = this.binding.compiler.vm
 
         if (compiler.repeat &&
@@ -3186,7 +3199,7 @@ module.exports = {
                 if (target) {
                     e.el = target
                     e.targetVM = target.vue_viewmodel
-                    handler.call(ownerVM, e)
+                    handler.call(isExp ? e.targetVM : ownerVM, e)
                 }
             }
             dHandler.event = event

examples/todomvc/index.html

@@ -28,7 +28,7 @@
                     <li
                         class="todo"
                         v-repeat="todos"
-                        v-if="todoFilter(completed)"
+                        v-if="filterTodo(this)"
                         v-class="
                             completed : completed,
                             editing   : this == editedTodo
@@ -39,10 +39,10 @@
                                 class="toggle"
                                 type="checkbox"
                                 v-model="completed"
-                                v-on="change:toggleTodo"
+                                v-on="change: toggleTodo(this)"
                             >
-                            <label v-text="title" v-on="dblclick:editTodo"></label>
-                            <button class="destroy" v-on="click:removeTodo"></button>
+                            <label v-text="title" v-on="dblclick: editTodo(this)"></label>
+                            <button class="destroy" v-on="click: removeTodo(this)"></button>
                         </div>
                         <input
                             class="edit"
@@ -50,9 +50,9 @@
                             v-model="title"
                             v-todo-focus="this == editedTodo"
                             v-on="
-                                blur  : doneEdit,
-                                keyup : doneEdit | key enter,
-                                keyup : cancelEdit | key esc
+                                blur  : doneEdit(this),
+                                keyup : doneEdit(this) | key enter,
+                                keyup : cancelEdit(this) | key esc
                             "
                         >
                     </li>

examples/todomvc/js/app.js

@@ -1,31 +1,33 @@
-var filters = {
-    all: function () { return true },
-    active: function (completed) { return !completed },
-    completed: function (completed) { return completed }
-}
-
-Vue.directive('todo-focus', function (value) {
-    var el = this.el
-    if (value) {
-        setTimeout(function () { el.focus() }, 0)
-    }
-})
-
 var app = new Vue({
 
     el: '#todoapp',
 
+    directives: {
+        'todo-focus': function (value) {
+            if (value) {
+                var el = this.el
+                setTimeout(function () { el.focus() }, 0)
+            }
+        }
+    },
+
     created: function () {
+        this.filters = {
+            all: function (todo) { todo.completed; return true },
+            active: function (todo) { return !todo.completed },
+            completed: function (todo) { return todo.completed }
+        }
         this.updateFilter()
+        window.addEventListener('hashchange', function () {
+            app.updateFilter()
+        })
         this.remaining = this.todos.filter(function (todo) {
             return !todo.completed
         }).length
     },
 
     data: {
-
         todos: todoStorage.fetch(),
-
         allDone: {
             $get: function () {
                 return this.remaining === 0
@@ -41,10 +43,11 @@ var app = new Vue({
     },
 
     methods: {
+
         updateFilter: function () {
             var filter = location.hash.slice(2)
-            this.filter = (filter in filters) ? filter : 'all'
-            this.todoFilter = filters[this.filter]
+            this.filter = (filter in this.filters) ? filter : 'all'
+            this.filterTodo = this.filters[this.filter]
         },
 
         addTodo: function () {
@@ -57,35 +60,35 @@ var app = new Vue({
             }
         },
 
-        removeTodo: function (e) {
-            this.todos.remove(e.targetVM.$data)
-            this.remaining -= e.targetVM.completed ? 0 : 1
+        removeTodo: function (todo) {
+            this.todos.remove(todo.$data)
+            this.remaining -= todo.completed ? 0 : 1
             todoStorage.save()
         },
 
-        toggleTodo: function (e) {
-            this.remaining += e.targetVM.completed ? -1 : 1
+        toggleTodo: function (todo) {
+            this.remaining += todo.completed ? -1 : 1
             todoStorage.save()
         },
 
-        editTodo: function (e) {
-            this.beforeEditCache = e.targetVM.title
-            this.editedTodo = e.targetVM
+        editTodo: function (todo) {
+            this.beforeEditCache = todo.title
+            this.editedTodo = todo
         },
 
-        doneEdit: function (e) {
+        doneEdit: function (todo) {
             if (!this.editedTodo) return
             this.editedTodo = null
-            e.targetVM.title = e.targetVM.title.trim()
-            if (!e.targetVM.title) this.removeTodo(e)
+            todo.title = todo.title.trim()
+            if (!todo.title) this.removeTodo(todo)
             todoStorage.save()
         },
 
-        cancelEdit: function (e) {
+        cancelEdit: function (todo) {
             this.editedTodo = null
-            e.targetVM.title = this.beforeEditCache
+            todo.title = this.beforeEditCache
         },
-
+        
         removeCompleted: function () {
             this.todos.remove(function (todo) {
                 return todo.completed
@@ -93,8 +96,4 @@ var app = new Vue({
             todoStorage.save()
         }
     }
-})
-
-window.addEventListener('hashchange', function () {
-    app.updateFilter()
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "author": {
     "name": "Evan You",
     "email": "yyx990803@gmail.com",