8000 Change ref based parent <Page> searching to nextTick based $root. · saknarak/nativescript-vue@d4e2c50 · GitHub
[go: up one dir, main page]
Skip to content

Commit d4e2c50

Browse files
rigor789rigor789
committed
Change ref based parent <Page> searching to nextTick based $root.
1 parent 1e6decc commit d4e2c50

File tree

2 files changed

+17
-17
lines changed

2 files changed

+17
-17
lines changed

‎platform/nativescript/runtime/components/action-bar.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {warn} from 'core/util/debug'
1+
import { warn } from 'core/util/debug'
22

33
export default {
44
name: 'action-bar',
@@ -13,20 +13,20 @@ export default {
1313
},
1414

1515
mounted() {
16-
const refKeys = Object.keys(this.$root.$refs)
17-
18-
// TODO figure out how to find the Page object without using the $refs property
19-
if (refKeys.length === 0) {
20-
warn('Make sure the page element has a "ref" attribute like <page ref="page"> or <page ref="my-ref">, otherwise no action-bar will be shown!', this)
21-
return
22-
}
23-
24-
const page = this.$parent.$refs[refKeys[0]].nativeView
25-
page.actionBar = this.$refs.actionBar.nativeView
26-
page.actionBarHidden = false
27-
if (this.title) {
28-
this.$refs.actionBar.setAttribute('title', this.title)
29-
}
16+
this.$nextTick(() => {
17+
if (this.$root.$el.tagName !== 'page') {
18+
warn('Make sure you are placing the <ActionBar> component as a direct child of a <Page> element.')
19+
return
20+
}
21+
22+
const page = this.$root.$el.nativeView
23+
24+
page.actionBar = this.$refs.actionBar.nativeView
25+
page.actionBarHidden = false
26+
if (this.title) {
27+
this.$refs.actionBar.setAttribute('title', this.title)
28+
}
29+
})
3030
},
3131

3232
watch: {

‎samples/app/app-with-list-view.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const Vue = require('../dist/index')
1+
const Vue = require('nativescript-vue/dist/index')
22
const http = require('http')
33
const Page = require('ui/page').Page
44
const StackLayout = require('ui/layouts/stack-layout').StackLayout
@@ -18,7 +18,7 @@ new Vue({
1818
},
1919

2020
template: `
21-
<page ref="page">
21+
<page>
2222
<action-bar :title="subreddit">
2323
<!-- leaving this commented as an example on how to use the navigation button: -->
2424
<!--<navigation-button text="Back!" android.systemIcon="ic_menu_back" @tap="navigationButtonPressed"></navigation-button>-->

0 commit comments

Comments
 (0)
0