Global variables?

Questions
1

Just started with F7 and trying to figure out how to set a global variables that can be used for all my pages. This is what I have so far and it is not working:

My app.js has this:

var app = new Framework7({
on: {
init: function () {
//sqllite.initialize()
},
pageInit: function () {
console.log(‘Page initialized’)
},
},
root: ‘#app’, // App root element
id: ‘io.framework7.testapp’, // App bundle ID
name: ‘Framework7’, // App name
theme: ‘auto’, // Automatic theme detection
// App root data
data: function () {
return {
code: ‘111’,
};
},
// App root methods
methods: {
helloWorld: function () {
app.dialog.alert(‘Hello World!’);
},
},
// App routes
routes: routes,
});

How can I use the global ‘code’ throughout my pages?

2 
// template7Page
<div class="page">
  <div class="page-content">
    {{$root.code}}
  </div>
</div>

// compoPage
<template>
  <div class="page">
    <div class="page-content">
      {{$root.code}}
    </div>
  </div>
</template>

// plainHtml
{
  path:'/plain/',
  url:'./pages/plain.html',
  on:{
    pageInit:function(e,page){
      console.log(page.app.data.code);
      //or console.log(app.data.code);
    }
  }
}
3

I must still be doing something wrong as I can not get this to work. Also, an additional question, how can a global be loaded onto index.html?

4 
<!-- index.html -->
<body>
  <div id="app">
    <div class="view view-main">
      <!-- keep it empty -->
    </div>
  </div>
</body>

<!-- initial.html -->
<div class="page">
  <div class="page-content">
    {{$root.code}}
  </div>
</div>

var app = new Framework7({
  root:'#app',
  theme:'auto',
  data:function(){
    return {
      code:'111'
    };
  },
  routes:[
    {
      path: '/',
      templateUrl: './pages/initial.html'
    }
  ]
});
app.views.create('.view-main',{
  url: '/'
})
1 Like