Hey!
I have a cordova app with 5 pages. Every page has own Javascript code which should run after page init. I was wondering what is the best practice? My main.js looks like:
app = new Framework7({
root: '#app',
name: 'MyApp',
id: 'com.example.myapp',
routes: [
{name: 'welcome', path: '/welcome/', componentUrl: 'welcome.html', options: {animate: false, reloadCurrent: true}},
{name: 'home', path: '/home/', componentUrl: 'home.html', options: {animate: false, reloadCurrent: true}},
{name: 'notes', path: '/notes/', componentUrl: 'notes.html', options: {animate: false, reloadCurrent: true}},
{name: 'account', path: '/account/', componentUrl: 'account.html', options: {animate: false, reloadCurrent: true}},
{name: 'settings', path: '/settings/', componentUrl: 'settings.html', options: {animate: false, reloadCurrent: true}},
]
}); and more...
My index.html looks like:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src * gap: file:; style-src 'self' 'unsafe-inline'; img-src * data:; script-src * 'unsafe-inline' 'unsafe-eval'; font-src * data:;">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="theme-color" content="#0C2530">
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app">
<div class="panel panel-left panel-cover">
<div class="main-menu">
<div class="list links-list">
<ul>
<li><a id="main-menu-home" href="/home/" class="panel-close">Home</a></li>
<li><a id="main-menu-notes" href="/notes/" class="panel-close">Notes</a></li>
<li><a id="main-menu-settings" href="/settings/" class="panel-close">Settings</a></li>
<li><a id="main-menu-account" href="/account/" class="panel-close">Account</a></li>
</ul>
</div>
</div>
</div>
<div class="view view-main safe-areas">
<div data-name="blank" class="page" id="page-blank"></div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The pages, for example the welcome page looks like:
<template>
<div data-name="welcome" class="page" id="page-welcome">
<div class="navbar"><div class="navbar-bg"></div><div class="navbar-inner sliding"><div class="title">{{text_title}}</div></div></div>
<div class="page-content hide-navbar-on-scroll">
... some page content ...
</div>
</div>
</template>
<script>
return {
data: function () {
return {
text_title: 'Welcome to my app',
}
},
on:{
pageAfterIn: function () {
... some Javascript code ...
},
}
}
</script>
Is this the best practice?
Thanks for an awesome Framework!