Dynamic loading of initial view with Phonegap

Questions
1

I have an app that will have a view with pages that should only be displayed if the user has not loaded the app before. A boolean will be held in localstorage to determine whether or not the initial view should be shown or not and it will be checked in the deviceready function.

What is the best way to handle this?

Thanks!

K

2 
//on home page (or page that is initiated first)    
onPageInit(event, page){

    //let's assume that your first run view in popup (can be what ever you want)
    var firstRunPopup = app.popup.get('.firstRunPopup');

    if (localStorage.getItem("firstRun") === null) {
      firstRunPopup.open();
      localStorage.setItem('firstRun', true);
    }

    }
3

That’s not quite what I’m looking for, more like this:

View a shows up on the first load, and has several pages.

View b shows up after first load and has several pages.

Does that make sense?

K

4

You have two options

  1. Add two views, one with display:none, and when require, just hide first one and show another one.
  2. Create views dynamically
if (localStorage.something) {
  app.views.create('.view-main', {
    url: '/page-b/'
  })
} else {
  app.views.create('.view-main', {
    url: '/page-a/'
  })
}
5

Ok, so if I create the views dynamically, setting .view-main to a URL whats in the index.html for views? Are they the view names without the class view-main? And they are loaded via routes?

6

Ok, so I am still a bit confused here as to the best way to accomplish this and what the index.html looks like.

Here’s what I’m looking at:

<div class="view" id="view-first"> <!-- this view should be shown if the localstorage variable = false -->
<div class="page_1"></div>
<div class="page_2"></div>
</div>
    
<div class="views tabs"><!-- view_1 of the tabs should shown if localstorage variable = true -->
<div class="view" id="view_1"><div class="page" ></div></div>
<div class="view" id="view_2"><div class="page"></div></div>
</div>

Hope that makes more sense.

7

Then you may keep your index without Views and just add them and init dynamically:

var app = new Framework7({...});

if (localStorage.something) {
  app.root.append(`
    <div class="views tabs">
      <div class="view" id="view_1"></div>
      <div class="view" id="view_2"></div>
    </div>
  `);
  app.views.create('#view_1', {...});
  app.views.create('#view_2', {...});
} else {
  app.root.append(`
    <div class="view" id="view-first"></div>
  `);
  app.views.create('#view-first', {...});
}