cordova - Ejecutando varios archivos JS con la biblioteca Ratchet push.js

phonegap-build ratchet-2

Question

Estoy desarrollando una aplicación Phonegap con Ratchet 2.0.2 usando push.js para la transición entre páginas. Todo está funcionando sin problemas, pero hace un par de horas tropecé con esto:

Las etiquetas de script que contienen JavaScript no se ejecutarán en páginas que se carguen con push.js. Si desea adjuntar controladores de eventos a elementos en otras páginas, la delegación de eventos a nivel de documento es una solución común.

Después de hacer más investigación descubrí esto: Ejecutar script personalizado después de la página cargada con Ratchet / Push.js

Lo cual es casi el mismo problema que tengo, sin embargo, tengo que ir más allá porque necesito cargar no solo un script, sino dos (y tal vez más en el futuro), ¿cómo puedo aprovechar checkPage () para cargar más de uno ¿guión?

var checkPage = function(){
    //Only run if twitter-widget exists on page
    if(document.getElementById(''twitter-widget'')) {
        loadTwitterFeed(document,"script","twitter-wjs");
    }
};

window.addEventListener(''push'', checkPage);

Answer 1

Aquí está mi versión de cargar guiones para push.js, adaptado de la respuesta de Danito.

Tengo una relación 1: 1 para archivos html y js. Habrá un archivo thinga.html y thinga.js. Lo que decidí hacer fue agregar una identificación de cosa al contenido div en el html, así:

<div class="content" id="thinga">
    ...
</div>

Luego, en la configuración inicial de la aplicación, adjunté una función llamada ''checkPage'' al evento global push:

window.addEventListener(''push'', checkPage);

La función checkPage toma el id del div de contenido y comprueba si hay un archivo javascript del mismo nombre, y si es así, cárguelo usando $ .getScript () de jQuery desde los scripts/ directorio

var checkPage = function(){

    var elm = document.getElementsByClassName("content")[0];
    var script = elm.id;

    if(script) {
        $.getScript("scripts/"+elm.id+".js")
        .done(function( script, textStatus ) {
           console.log( textStatus );
        })
        .fail(function( jqxhr, statusText, errorThrown ) {
            console.log(errorThrown);
            console.log(statusText);
            console.log(jqxhr);
        });
    }
};

Esto parece ser el truco, al menos para mi caso de uso. Solo quería tirarlo por si alguna vez pudiera ayudar a alguien más.

Answer 2

He encontrado una solución para este problema cuando estoy trabajando con push.js. Lo que terminé haciendo al final es darle a cada página html que quiero cargar una #descripción. Esto significa que cuando me enlace a las páginas me enlace a contactlist.html # contacto.

En mi página html principal, agrego el detector de eventos:

 window.addEventListener(''push'', pageHandler);

Luego, en un archivo separado, ejecuto este script.

var pageHandler= function(){
  var page= window.location.hash;

  if (page == ''#contact''){
     //Put every script you want to use on this page here. 
  }
  if(page == ''#info''){
    //Same here, every script you need for this page. 
  }
};

No sé si esta es la mejor manera, pero siento que tengo un buen control sobre mi script, y funciona.

Answer 3

Solo pon mis pensamientos aquí. Hice un cambio para Ratchet.js para hacer trabajos js individuales para cada página. Cada html tiene un archivo js vinculado. ( https://github.com/mazong1123/ratchet-pro )

Al usar el nuevo ratchetPro.js, podemos hacer lo siguiente:

(function () {
    var rachetPageManager = new window.RATCHET.Class.PageManager();
    rachetPageManager.ready(function () {
        window.RATCHET.getScript(''js/jquery.js'', function () {
             // Put your logic here.
        });
    });
})();

Llame a window.RATCHET.getScript para cargar su js externo. Una vez que se haya cargado el js externo, se almacenará en caché y nunca se cargará nuevamente. Sin embargo, la devolución de llamada siempre se ejecutará cuando la página se conecte.

Answer 4

ACTUALIZAR: También vea esta pregunta.

Aquí hay una solución que he intentado y parece funcionar correctamente, pero estoy buscando algún comentario sobre si este es el mejor método o no ... Por favor, siéntete libre de comentar y haré las actualizaciones que sean necesarias. Sé que eval() es peligroso, pero no estoy seguro de lo peligroso que es en este caso.

En su índice / primera página, coloque el siguiente script en la parte inferior de la página, FUERA del .content div, para que no sea sobreescrito por push.js

<script>
    window.addEventListener(''push'', function(){
        var scriptsList = document.querySelectorAll(''script.js-custom'');
        for(var i = 0; i < scriptsList.length; ++i) {
            eval(scriptsList[i].innerHTML);
        }
    });
</script>

Luego, en cualquier otra página que se cargue a través de push.js , simplemente dale al script una clase de .js-custom . Este script debe colocarse DENTRO del div .content .

<div class="content">
    ...
    <script class="js-custom">
         alert(''I was executed!'');
    </script>
</div>

El primer script encontrará y recorrerá las etiquetas <script> con la clase .js-custom y ejecutará sus contenidos utilizando eval() .