I want to use {{ $root.appname }} this code in navbar and left panel. But dont initialize. If i click another page its working. But inside left panel and common navbar never working. Any solution this problem. I try to"http://framework7.io/docs/view.html#initial-page-route" this but not working.
That means you can not access root in your left panel ? Maybe you should put few miliseconds delay before accessing it. What is the framework you use behind, angular ?
Follow this guide http://framework7.io/docs/view.html#initial-page-route and do the same for view in panel
// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
root: '#app', // App root element
id: 'io.framework7.testapp', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
view: {
pushState: true,
iosDynamicNavbar: false,
},
// App root data
data: function () {
return {
app: {
name: "Anı Takvimi",
}
};
},
// App root methods
methods: {},
// App routes inside routes.js
routes: routes,
});
// Init/Create main view
var mainView = app.views.create('.view-main', {
url: '/',
})
We can access App root data in html like below.
<div class="navbar">
<div class="navbar-inner">
<div class="left">
</div>
<div class="title sliding"><a href="/"> {{ $root.app.name }} </a></div>
<div class="right">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
</div>
</div>
I wan to access this root data in left panel and navbar. But when app first initialize, {{ $root.app.name }} this code not working. If i click other page , {{ $root.app.name }} this code working.
// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
root: '#app', // App root element
id: 'io.framework7.testapp', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
view: {
pushState: true,
iosDynamicNavbar: false,
},
// App root data
data: function () {
return {
app: {
name: "Anı Takvimi",
}
};
},
// App root methods
methods: {},
// App routes inside routes.js
routes: routes,
});
// Init/Create main view
var mainView = app.views.create('.view-main', {
url: '/',
})
I try like this.
My routes
routes = [
{
path: '/',
templateUrl: './index.html',
on: {
pageInit: function (e, page) {
console.log("***** index-page **** ")
console.log(e)
console.log(page)
indexPage(e, page);
}
}
},
{
path: '/main/',
templateUrl: './pages/main.html',
on:{
pageInit:function (e, page) {
console.log("***** main-page **** ")
console.log(e)
console.log(page)
mainPage(e,page);
}
}
}
];
{{ $root.data.name }} not working in index.html when first initialize to app. But if i use inside main.html and go to page after app initialize, code is working.
And {{ $root.data.name }} this code never work inside left panel html.
Did you follow that guide http://framework7.io/docs/view.html#initial-page-route?
Looks like no as it says:
In app layout we must leave View blank:
So your home page must be loaded from different place, and view in index.html file must be empty
If the main view is empty, then where should I place the common tabbar, and most importantly, how can I use variables for templates in it like $root? Or the only way to place it (common tabbar) on each page separately and use templateurl?
You can use main App component https://framework7.io/docs/router-component.html#main-app-component