[solved] Problem when re-entering index.html

Questions
1

I have tried a thousand ways and I can not understand why the following happens (I have modified the code to simplify the example)

my app.js:

var app = new Framework7({
  root: '#app',
  ...
route: [
{
	path: '/',
	url: 'index.html'
},
{
	path: '/about/',
	url: 'about.html'
}
]
});

var $$ = Dom7;
var mainView = app.views.create('.view-main');

$$(".content-index").html("<p> my html code</p>");

when my app loads I can see “my html code”.
the problem is when I go to another page for example “about” and I want to return to index by clicking:

<a href="/"> Go Home </a>

but “my html code” can not be seen

to load it again I do:

$$(document).on('page:init', '.page[data-name="index"]', function (e,page) {
  console.log(page.route.url);
  $$(".content-index").html("<p>my html code</p>");
});

I have tried init reinit mounted, etc and nothing works I can see the “console.log” but “my html code” it is not loaded.

2

Because when you load home page again, it will load it from what you have set in routes - from index.html file, and there is no <p> my html code</p> there. You can do it like this:

...
{
  path: '/',
  url: 'index.html',
  on: {
    pageInit: function (e, page) {
      page.$el.find('.content-index').html("<p> my html code</p>");
    }
  },
},
...
1 Like
3

thanks vladimir, I appreciate your help very much :smiley: