Fixed setTextContent in cases where a placeholder child element is used.

Updated example app to test even more features.
nativescript-vue · Apr 22, 2017 · 8da45a1 · 8da45a1
1 parent 4fe358c
commit 8da45a1
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/nativescript-vue/dist/index.js b/nativescript-vue/dist/index.js
diff --git a/nativescript-vue/dist/index.js.map b/nativescript-vue/dist/index.js.map
diff --git a/nativescript-vue/platform/nativescript/renderer/view-node.js b/nativescript-vue/platform/nativescript/renderer/view-node.js
@@ -45,6 +45,14 @@ export default class ViewNode {
         }
     }
 
+    setText(text) {
+        if (this.type === 'detached-text') {
+            this.parent.setText(text)
+        } else {
+            this.setAttr('text', text)
+        }
+    }
+
     addEvent(evt, handler) {
         this.view.on(evt, handler)
     }
@@ -93,7 +101,7 @@ export default class ViewNode {
             }
         } else if (isTextView(this.view)) {
             child.view.parent = this.view
-            this.setAttr('text', child.view.text)
+            this.setText(child.view.text)
         } else {
             child.parent = null
             console.log(`Cant append child to ${this.type}`)

diff --git a/nativescript-vue/platform/nativescript/runtime/node-ops.js b/nativescript-vue/platform/nativescript/runtime/node-ops.js
@@ -75,7 +75,7 @@ export function tagName(elementNode) {
 export function setTextContent(node, text) {
     console.log(`{NSVue} -> SetTextContent(${node}, ${text})`)
 
-    node.setAttr('text', text)
+    node.setText(text)
 }
 
 export function setAttribute(nodeElement, key, val) {

diff --git a/vue-sample/app/images/vue.png b/vue-sample/app/images/vue.png
diff --git a/vue-sample/app/main-page.js b/vue-sample/app/main-page.js
@@ -23,15 +23,22 @@ function onReady(page) {
                 <button @tap="textRed = !textRed" style="color: white; background-color: darkcyan;">TAP HERE</button>
                 <label :style="{color: textRed ? 'red' : 'blue'}" style="text-align: center; margin-top: 20; font-size: 40" :text="showTrick ? 'Poof!' : 'Wait for it!'"></label>
                 <button @tap="showTrick = !showTrick">Tap to see a trick!</button>
-
-                <image v-if="showTrick" src="~/images/apple.jpg"></image>
+                
+                <image v-if="showTrick" style="height: 200;" :src="imgSrc"></image>
+                
+                <scroll-view orientation="horizontal" style="height: 100">
+                    <stack-layout orientation="horizontal">
+                        <image v-for="i in 10" :src="i%2 ? '~/images/apple.jpg' : '~/images/vue.png'" @tap="imgSrc = i%2 ? '~/images/apple.jpg' : '~/images/vue.png'"></image>
+                    </stack-layout>
+                </scroll-view>
             </stack-layout>
         </scroll-view>
         `,
 
         data: {
             textRed: false,
-            showTrick: false
+            showTrick: false,
+            imgSrc: '~/images/apple.jpg'
         },
 
         methods: {