How can i use {{ $root.appname }} in index page app first initialize?

1

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.

2

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 ?

3

Follow this guide http://framework7.io/docs/view.html#initial-page-route and do the same for view in panel

2 Likes
4 
// 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.

5 
// 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.

6

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

7

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?

8

You can use main App component https://framework7.io/docs/router-component.html#main-app-component

1 Like