¿Cómo se agrega la lógica específica de la página a jQuery Mobile?

StackOverflow https://stackoverflow.com/questions/8313480

Pregunta

he leído aquí que no puedes usar $(document).ready() En cada página de JQMobile. En su lugar la recomendación de usar pageInit() y pageCreate(). Todo esto está bien, pero no estoy muy seguro de cómo implementarlo.

Digamos que tengo una lista de URL que conducen a informes separados. Cada informe tendrá varias cosas que deben ocurrir cuando se cargue la página.

¿Tengo que poner toda la lógica de la página en la página principal?

Esta es una pregunta genérica, pero daré un ejemplo específico de lo que estoy tratando de hacer.

Un MVC3 Layout Page tiene mi elemento principal con todas las referencias de script.

Entonces tengo mi página de índice:

<div data-role="page" data-add-back-btn="true">

<div data-role="content">
    <div class="content-primary">
        <ul data-role="listview" data-theme="a">
            <li data-role="list-divider" data-theme="a">Category 1</li>
            <li><a href="someUrl" data-transition="slideup">Link 1</a></li> 
        </ul>
    </div>
</div>

Luego una página de destino separada para mi informe:

<div data-role="page" data-add-back-btn="true">  
<div data-role="header" data-theme="a">
    <h1>Report 1</h1>
    <a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>
</div>

Luego tengo una última página para mi diálogo de opciones:

<div id="dlgOpts" data-role="page" data-theme="a">

<div data-role="content">

    <h2>Please select the report options:</h2>

    <div data-role="fieldcontain">
        <label for="startDate">Start Date:</label>
        <input type="date" id="startDate" data-role="datebox" data-options='{"mode": "datebox"}' />
    </div>

    <div data-role="fieldcontain">
        <label for="endDate">End Date:</label>
        <input type="date" id="endDate" data-role="datebox" data-options='{"mode": "calbox"}' />
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" data-icon="back" data-role="button" data-rel="back">Cancel</a></div>
        <div class="ui-block-b"><a href="#" data-icon="check" data-role="button" data-rel="back">Ok</a></div>
    </div>
</div>

Mi objetivo es cargar el informe de la lista, y cuando se carga el informe, muestre el cuadro de diálogo de opciones. Si lo pongo en línea dentro de la página, siempre vuelve a las opciones porque se dispara cuando el diálogo se cierra (supongo que es una recarga completa de la página debajo de ella?).

En resumen: ¿cómo cargo el diálogo cuando se carga mi página de informe y luego lo hago? alguna cosa ¿Cuándo se cierra el diálogo de opciones?

¿Fue útil?

Solución

Me gusta incluir mi JavaScript en todo el sitio al final de cada documento HTML, por lo que si el usuario actualizó la página en cualquier página del sitio, ese JavaScript se cargará y estará disponible para el sitio. Mi estructura se parece a esto:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>My Fancy Mobile Title</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" type="text/css" href="library/css/default.css">

    <script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="content">
            <!-- Content Here -->
        </div>
    </div>

    <script src="library/js/default.js"></script></script>

</body>
</html>

Observe que JQuery Mobile se está incluiendo en el <head> del documento y mi JavaScript personalizado (default.js) se incluye en la parte inferior de la página para no bloquear la representación de la página.

Ahora para usar la versión móvil jQuery de $(document).ready();:

$('[data-role="page"]').live('pagecreate', function () {
    //code here will run each time a page is enhanced by jQuery Mobile, which will be once per page
});

$('[data-role="page"]').live('pageshow', function () {
    //code here will run each time a page is navigated to, which can be many times if the user navigates away and back
});

//you can also bind to specific pages
$('#home').live('pageshow', function () {
    //code here will run each time the `#home` page is shown
});

//you can bind to any selector that selects the `data-role="page"` elements
$('.page_element_class').live('pageshow', function () {
    //code here will run each time any page with the `.page_element_class` class is shown
});

También tenga cuidado de usar IDS, ya que tienen que ser únicos en todo el sitio, si dos páginas tienen un elemento con la misma ID, causará problemas, ya que muchas páginas estarán en el DOM a la vez.

Otros consejos

"Siempre vuelve a las opciones porque se dispara cuando se cierra el diálogo (supongo que es una recarga completa de la página debajo de ella?)".

Creo que es porque te estás perdiendo la propiedad href en tu etiqueta: ¿cuál es el nombre del diálogo que estás tratando de abrir?

<a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>

Esa podría ser la razón por la cual toda la página se actualiza en lugar de dejar que JQM cargue ese diálogo para usted. Una vez que esto funciona, puede usar la sugerencia proporcionada por @Jasper, es decir

$("#dialogname").live("pagebeforeshow", function(e, data){
  // here you prepare your dialog contents
});

$("#dialogname").live("pagebeforehide", function(e, data){
 // here you finalize before your dialog disappears
});

Espero que esto ayude

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top