[V2] Scripts on a router Page


#1

I would like to make the script on the page-loader-component.html page that I put in the pageInit

$(document).ready(function () {
                //HIDRO
                $('#selectHidrologicos').hide();
                $('#classificationHidrologicos').click(function () {
                    $('#selectHidrologicos').slideToggle();
                    if ($('#arrowHidro').attr("src") === "images/down.png")
                        $('#arrowHidro').attr("src", "images/up.png");
                    else
                        $('#arrowHidro').attr("src", "images/down.png");

                });
            });
            console.log('pageInit', page);
        },

function on this page where it is. But I can not make it work.



index.html

<!DOCTYPE html>
       [...]
                       <ul>
                            <li>
                                <a href="/page-loader-component/vladimir/123/about-me/1/?start=0&end=30#top">Component Page</a>
                            </li>
                        </ul>                    
         
<!-- Cordova -->
<!--
<script src="cordova.js"></script>
-->
<!-- Framework7 library -->
<script src="bower_components/framework7/dist/js/framework7.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- Path to your custom app scripts -->
<script src="js/app.js"></script>

routes.js

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/about/',
    url: './pages/about.html',
  },  
  // Page Loaders & Router  
  {
    path: '/page-loader-component/:user/:userId/:posts/:postId/',
    componentUrl: './pages/page-loader-component.html',
  }, 
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];  

page-loader-component.html

<template>
<div class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="ios-only">Back</span>
                </a>
            </div>
            <div class="title">Component Page</div>
        </div>
    </div>
    <div class="page-content">
        <div class="block block-strong">
            <!-- HIDRO -->
            <div class="classification" id="classificationHidrologicos"><h2>Hidrológicos</h2><img class="arrow" id="arrowHidro" src="images/down.png" /></div>
            <div class="selectclassification" id="selectHidrologicos">
                <div class="definicao">
                    Nesse grupo se classificam todos os desastres que se originam na água, ou seja,
                    nos mares e oceanos do mundo.
                    <br />Como exemplos podemos citar:
                    <br>
                    <button id="tsunamis" class="iconesFenomenos"> </button>
                    <button id="inundacoes" class="iconesFenomenos"> </button>

                </div>
            </div>
        </div>
    </div>
</div>
    
< /template>

< script>

    return {
        // Page Events
    on: {
        pageMounted: function (e, page) {
            console.log('pageMounted', page);
        },


        pageInit: function (e, page) {

            //Abrir Fechar classificationS
            $(document).ready(function () {
                //HIDRO
                $('#selectHidrologicos').hide();
                $('#classificationHidrologicos').click(function () {
                    $('#selectHidrologicos').slideToggle();
                    if ($('#arrowHidro').attr("src") === "images/down.png")
                        $('#arrowHidro').attr("src", "images/up.png");
                    else
                        $('#arrowHidro').attr("src", "images/down.png");

                });
            });
            console.log('pageInit', page);
        },



        pageBeforeIn: function (e, page) {
            console.log('pageBeforeIn', page);
        },
        pageAfterIn: function (e, page) {
            console.log('pageAfterIn', page);
        },
        pageBeforeOut: function (e, page) {
            console.log('pageBeforeOut', page);
        },
        pageAfterOut: function (e, page) {
            console.log('pageAfterOut', page);
        },
        pageBeforeRemove: function (e, page) {
            console.log('pageBeforeRemove', page);
        },
    }
}

< /script >


#2

tengo el mismo problema.

Lograste solucionarlo ?


#3

No,

My scripts need jquery to work
how I declare library jQuery v1.11.3
to work in a router page?


#4

Insert jquery script globally in index html


#5

ok, I change my router to

    {
    path: '/about/',
    url: './pages/about.html',
    on: {
        pageBeforeIn: function (event, page)
        {     
         //my script in jquery
        }
    },
},

but my script still does not work on the page about


#6

Do you really use $(document).ready(function () {? Never use it in mobile apps and in F7 apps as well, write your code without it


#7

FYI - I have tried “expose-loader” on npm and seems to work well with webpack and jQuery

//Expose Jquery and plugin globaly
import 'expose-loader?$!jquery';