Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compiling bindings inside a v-model directive #176

Closed
ghost opened this issue Mar 12, 2014 · 7 comments
Closed

Compiling bindings inside a v-model directive #176

ghost opened this issue Mar 12, 2014 · 7 comments

Comments

@ghost
Copy link

ghost commented Mar 12, 2014

I would like to use some of my VM data inside a v-model directive. As an example:

http://jsfiddle.net/6ZX3C/1/

The second textarea is my desired result but as you can see it does not have a v-model directive on it. Is there a workaround or better way to approach this? Also interestingly enough it works fine for the input box, the textarea is the one not compiling correctly.

Thanks!

@ghost
Copy link
Author

ghost commented Mar 12, 2014

Also interesting thing I noticed. If you inspect the broken textarea the correct values are there, but to us they are still showing the double curly braces? O_O

@jcaxmacher
Copy link

This is an interesting issue and neat use of Vue. I tried getting it to work by breaking it into a component:

http://jsfiddle.net/obsoleter/6ZX3C/3/

But it has the same issue. I think it has to do with some textarea idiosyncrasies. The correct value you see in the inspector is, I think, the textareaElement.defaultValue attribute. For some reason, v-model is stuck thinking the uncompiled text is the value and overwrites the compiled text.

@jcaxmacher
Copy link

This awful hack of compiler.js causes the compiled textarea content to be pushed back into its value attribute, but does not trigger the change event, so does not update the model:

diff --git a/src/compiler.js b/src/compiler.js
index 1252a45..15aff31 100644
--- a/src/compiler.js
+++ b/src/compiler.js
@@ -456,7 +456,7 @@ CompilerProto.compileTextNode = function (node) {

     var tokens = TextParser.parse(node.nodeValue)
     if (!tokens) return
-    var el, token, directive
+    var el, token, directive, parentNode, val

     for (var i = 0, l = tokens.length; i < l; i++) {

@@ -486,7 +486,12 @@ CompilerProto.compileTextNode = function (node) {
         this.bindDirective(directive)

     }
-    node.parentNode.removeChild(node)
+    parentNode = node.parentNode
+    parentNode.removeChild(node)
+    val = parentNode.value
+    if (parentNode.tagName === 'TEXTAREA') utils.nextTick(function () {
+        parentNode.value = val
+    });
 }

 /**

@yyx990803
Copy link
Member

fixed in 5872bf3

@jcaxmacher
Copy link

Brandon's original example is working for me with that commit, but this one is not:

http://jsfiddle.net/obsoleter/6ZX3C/3/

Should it? I see Error parsing expression: > yield

yyx990803 pushed a commit that referenced this issue Mar 13, 2014
@yyx990803
Copy link
Member

The content inside a textarea is parsed as a value attribute of the textarea element, so it doesn't allow partials which are DocumentFragments. You can get around by setting it with this.$compiler.rawContent though: http://jsfiddle.net/yyx990803/6ZX3C/5/

@jcaxmacher
Copy link

That clarifies it. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants