add v-cloak

Evan You · Evan You · commit c599bed93d4f · 2014-02-11T13:26:22.000-05:00
diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html
@@ -4,6 +4,7 @@
         <title>Todo</title>
         <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="bower_components/todomvc-common/base.css">
+        <style> [v-cloak] { display: none; } </style>
     </head>
     <body>
         <section id="todoapp">
@@ -18,7 +19,7 @@ <h1>todos</h1>
                     v-on="keyup:addTodo | key enter"
                 >
             </header>
-            <section id="main" v-show="todos.length">
+            <section id="main" v-show="todos.length" v-cloak>
                 <input
                     id="toggle-all"
                     type="checkbox"
@@ -58,7 +59,7 @@ <h1>todos</h1>
                     </li>
                 </ul>
             </section>
-            <footer id="footer" v-show="todos.length">
+            <footer id="footer" v-show="todos.length" v-cloak>
                 <span id="todo-count">
                     <strong v-text="remaining"></strong> {{remaining | pluralize item}} left
                 </span>
diff --git a/src/compiler.js b/src/compiler.js
@@ -330,7 +330,7 @@ CompilerProto.compileNode = function (node) {
         prefix = config.prefix + '-'
     // parse if has attributes
     if (attrs && attrs.length) {
-        var attr, isDirective, exps, exp, directive
+        var attr, isDirective, exps, exp, directive, dirname
         // loop through all attributes
         i = attrs.length
         while (i--) {
@@ -346,7 +346,8 @@ CompilerProto.compileNode = function (node) {
                 j = exps.length
                 while (j--) {
                     exp = exps[j]
-                    directive = Directive.parse(attr.name.slice(prefix.length), exp, this, node)
+                    dirname = attr.name.slice(prefix.length)
+                    directive = Directive.parse(dirname, exp, this, node)
                     if (directive) {
                         this.bindDirective(directive)
                     }
@@ -362,7 +363,9 @@ CompilerProto.compileNode = function (node) {
                 }
             }
 
-            if (isDirective) node.removeAttribute(attr.name)
+            if (isDirective && dirname !== 'cloak') {
+                node.removeAttribute(attr.name)
+            }
         }
     }
     // recursively compile childNodes
diff --git a/src/directives/index.js b/src/directives/index.js
@@ -1,4 +1,5 @@
 var utils      = require('../utils'),
+    config     = require('../config'),
     transition = require('../transition')
 
 module.exports = {
@@ -44,6 +45,15 @@ module.exports = {
                 this.lastVal = value
             }
         }
+    },
+
+    cloak: {
+        bind: function () {
+            var el = this.el
+            this.compiler.observer.once('hook:ready', function () {
+                el.removeAttribute(config.prefix + '-cloak')                
+            })   
+        }
     }
 
 }

Original file line number	Diff line number	Diff line change
`@@ -330,7 +330,7 @@ CompilerProto.compileNode = function (node) {`
`330`	`330`	`prefix = config.prefix + '-'`
`331`	`331`	`// parse if has attributes`
`332`	`332`	`if (attrs && attrs.length) {`
`333`		`- var attr, isDirective, exps, exp, directive`
	`333`	`+ var attr, isDirective, exps, exp, directive, dirname`
`334`	`334`	`// loop through all attributes`
`335`	`335`	`i = attrs.length`
`336`	`336`	`while (i--) {`
`@@ -346,7 +346,8 @@ CompilerProto.compileNode = function (node) {`
`346`	`346`	`j = exps.length`
`347`	`347`	`while (j--) {`
`348`	`348`	`exp = exps[j]`
`349`		`- directive = Directive.parse(attr.name.slice(prefix.length), exp, this, node)`
	`349`	`+ dirname = attr.name.slice(prefix.length)`
	`350`	`+ directive = Directive.parse(dirname, exp, this, node)`
`350`	`351`	`if (directive) {`
`351`	`352`	`this.bindDirective(directive)`
`352`	`353`	`}`
`@@ -362,7 +363,9 @@ CompilerProto.compileNode = function (node) {`
`362`	`363`	`}`
`363`	`364`	`}`
`364`	`365`
`365`		`- if (isDirective) node.removeAttribute(attr.name)`
	`366`	`+ if (isDirective && dirname !== 'cloak') {`
	`367`	`+ node.removeAttribute(attr.name)`
	`368`	`+ }`
`366`	`369`	`}`
`367`	`370`	`}`
`368`	`371`	`// recursively compile childNodes`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`var utils = require('../utils'),`
	`2`	`+ config = require('../config'),`
`2`	`3`	`transition = require('../transition')`
`3`	`4`
`4`	`5`	`module.exports = {`
`@@ -44,6 +45,15 @@ module.exports = {`
`44`	`45`	`this.lastVal = value`
`45`	`46`	`}`
`46`	`47`	`}`
	`48`	`+ },`
	`49`	`+`
	`50`	`+ cloak: {`
	`51`	`+ bind: function () {`
	`52`	`+ var el = this.el`
	`53`	`+ this.compiler.observer.once('hook:ready', function () {`
	`54`	`+ el.removeAttribute(config.prefix + '-cloak')`
	`55`	`+ })`
	`56`	`+ }`
`47`	`57`	`}`
`48`	`58`
`49`	`59`	`}`