Dicas Framework 7 – Como executar uma função JS no carregamento de uma página.

É comum situações na qual uma determinada função JS, DOM 7 ou jQuery só devem ser executadas quando o usuário acessa determinada página do aplicativo, logo, não podemos carregar estas funções de imediato no index, pois dependem da ação do usuário.

Podemos carregar qualquer função diretamente no arquivo my-app.js, dentro do bloco routes.

No modelo padrão disponibilizado na documentação do Framework 7 e visto nas aulas de Como criar uma interface para seu aplicativo mobile usando Framework 7 temos a seguinte estrutura de rotas;

// Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],

Agora, para chamarmos a função desejada basta acrescentar o parametro on e a função pageInit, ficando assim;

// Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
	  on: {
             pageInit: function(about) {
                NomeDaFuncaoJSQueDesejaExecutar();
             },
          },
     },
  ],

Prontinho! A única questão que devemos nos preocupar é que na linha pageInit: function(about) devemos colocar dentro do parânteses o data-name da página, saiba mais no tópico Criando as páginas internas em Como criar uma interface para seu aplicativo mobile usando Framework 7

Supondo também que você tenha criado um arquivo .js para a função NomeDaFuncaoJSQueDesejaExecutar(); você deverá carregar este arquivo no index.html do seu aplicativo.