Как вы добавляете логику, специфичную для страницы, в jQuery Mobile?

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

Вопрос

Я читал здесь которые вы не можете использовать $(document).ready() на каждой странице JQMobile.Вместо этого рекомендуется использовать pageInit() и pageCreate().Все это прекрасно, но я не совсем уверен, как это реализовать.

Допустим, у меня есть список URL-адресов, которые ведут к отдельным отчетам.В каждом отчете будут содержаться различные вещи, которые должны произойти при загрузке страницы.

Должен ли я поместить всю логику страницы на главную страницу?

Это общий вопрос, но я приведу конкретный пример того, что я пытаюсь сделать.

MVC3 Layout на странице есть элемент my head со всеми ссылками на скрипт.

Тогда у меня есть моя индексная страница:

<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>

Затем отдельная целевая страница для моего отчета:

<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>

Затем у меня есть последняя страница для моего диалогового окна параметров:

<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>

Моя цель - загрузить отчет из списка, а когда отчет загрузится, показать диалоговое окно параметров.Если я помещаю его встроенным на страницу, он всегда возвращается к параметрам, потому что он срабатывает при закрытии диалогового окна (я предполагаю, что это полная перезагрузка страницы под ним?).

Итак, вкратце:Как мне загрузить диалоговое окно при загрузке страницы моего отчета, а затем выполнить что - то когда закроется диалоговое окно параметров?

Это было полезно?

Решение

Мне нравится включать мой JavaScript в конце каждого документа HTML, поэтому, если пользователь обновил страницу на любой странице на сайте, JavaScript загрузится и будет доступен для сайта. Моя структура выглядит примерно так:

<!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>

Обратите внимание, что JQuery Mobile включен в <head> о документе и моем пользовательском JavaScript (default.js) включен в нижней части страницы, чтобы не блокировать рендеринг страницы.

Теперь использовать мобильную версию jQuery $(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
});

Также будьте осторожны с использованием идентификаторов, так как они должны быть уникальными по всему сайту, если у двух страниц есть элемент с тем же идентификатором, это вызовет проблемы, поскольку многие страницы будут в DOM сразу.

Другие советы

"он всегда возвращается к параметрам, потому что срабатывает при закрытии диалогового окна (я предполагаю, что это полная перезагрузка страницы под ним?)".

Я думаю, это потому, что вам не хватает свойства HREF в вашем теге A - как называется диалоговое окно, которое вы пытаетесь открыть?

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

Возможно, это причина, по которой обновляется вся страница вместо того, чтобы просто позволить JQM загрузить это диалоговое окно для вас.Как только это сработает, вы можете использовать предложение, предоставленное @Jasper, т.е.

$("#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
});

Надеюсь, это поможет

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top