Почему я должен поместить все script в index.html в jQuery mobile

Я использовал $.mobile.changepage для перенаправления в моих проектах phonegap + jquerymobile. Однако меня смущает то, что мне нужно поставить script всех страниц в один файл index.html. Если нет, страница перенаправления не может выполнить функцию в своем заголовке.

например, мой index.html кажется $(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

то мое устройство будет перенаправлено на test.html, который выглядит как

$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>

Однако script никогда не будет выполняться в test.html. Затем я помещаю script в index.html, что я ожидаю. Независимо от того, если я поместил все script на ту же страницу, проект станет сложнее и сложнее сохранить. Благодарим за помощь.

Ответ 1

Введение

Эта статья также может быть найдена ЗДЕСЬ как часть моего блога.

Как jQuery Mobile обрабатывает изменения страницы

Чтобы понять эту ситуацию, вам нужно понять, как работает jQuery Mobile. Он использует ajax для загрузки других страниц.

Первая страница загружается нормально. Его HEAD и BODY загружаются в DOM, и они ждут другого контента. Когда загружается вторая страница, содержимое BODY загружается в DOM. Точнее, даже BODY не загружен полностью. Будет загружен только первый div с атрибутом data-role = "page", все остальное будет отброшено. Даже если у вас больше страниц внутри BODY, только первый будет загружен. Это правило применяется только к последующим страницам, если у вас больше страниц в начальном HTML, все они будут загружены.

Вот почему ваша кнопка успешно показывается, но событие click не работает. То же событие щелчка, чей родительский HEAD не учитывался во время перехода страницы.

Вот официальная документация: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

К сожалению, вы не найдете этого в своей документации. Эфир думает, что это общее знание, или они забыли описать это, как и мои другие темы. (Документация jQuery Mobile большая, но не хватает многих вещей).

Решение 1

На второй странице и на каждой другой странице переместите тэг SCRIPT в BODY, например:

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

Это быстрое решение, но все же уродливое.

Рабочий пример можно найти в моем другом ответе здесь: Страницы не запускаются после изменения

Другой рабочий пример: Страница загружена по-другому с переходом jQuery-mobile

Решение 2

Переместите все ваши javascript в исходный первый HTML. Соберите все и поместите его в один файл js в HEAD. Инициализируйте его после загрузки jQuery Mobile.

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

В конце я расскажу, почему это является частью хорошего решения.

Решение 3

Используйте rel= "external" в ваших кнопках и каждом элементе, который вы используете для изменения страницы. Из-за этого ajax не будет использоваться для загрузки страницы, а ваше приложение jQuery Mobile будет вести себя как обычное веб-приложение. К сожалению, это не очень хорошее решение в вашем случае. Телефонная связь никогда не должна работать как обычное веб-приложение.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

Официальная документация, найдите главу: Связь без Ajax

Реалистичное решение

Реалистичное решение будет использовать Решение 2. Но в отличие от решения 2, я бы использовал тот же файл index.js и инициализировал его внутри HEAD всех возможных других страниц.

Теперь вы можете задать мне ПОЧЕМУ?

Phonegap, как jQuery Mobile, глючит, и рано или поздно произойдет ошибка, и ваше приложение будет терпеть неудачу (включая загруженный DOM), если ваш каждый js-контент находится внутри одного файла HTML, DOM можно удалить, а Phonegap обновит вашу текущую страницу. Если на этой странице нет javascript, это не сработает до перезапуска.

Заключительные слова

Эта проблема может быть легко исправлена с хорошей архитектурой страницы. Если кто-то заинтересован, я написал СТАТЬЯ о хорошей архитектуре страницы jQuery Mobile. В оболочке ореха я обсуждаю, что знание того, как работает jQuery Mobile, - это самое важное, что вам нужно знать, прежде чем вы сможете успешно создать первое приложение.

Ответ 2

В отличие от обычных обычных HTML-страниц, jQuery Mobile использует технологию ajax при навигации между страницами. Поэтому обязательно импортируйте все свои JS файлы и библиотеки на все ваши html-страницы.

Если вы заметите внимательно, вы увидите, что файлы JS с предыдущей страницы учитываются при загрузке второй страницы. Но если вы нажмете rrefresh текущую страницу, тогда файлы js текущей страницы будут эффективны.

Итак, как я сказал ранее, обязательно импортируйте файлы js во все html файлы.

Также не нужно вызывать deviceready, используйте следующий синтаксис для вызова специфичных для вашей страницы функций js

$(document).on('pageshow', '#YourPageID', function(){
    // Your code goes here
});

Ответ 3

JQuery Mobile использует ajax для загрузки "страницы". "Страница" здесь - это div с data-role = page. Если вы загружаете физическую страницу index.html, вы можете перемещаться с помощью changePage на любой "страничный" div внутри этой страницы.

Однако, если вы хотите загрузить "страницу" с другой физической страницы, jQM будет загружать только первый "страничный" div с этой страницы. Что на самом деле происходит, так это то, что вы не меняете страницу, jQM просто загружает этот конкретный "страничный" div с помощью ajax и вводит его на вашу текущую страницу.

У вас есть две возможные архитектуры, где вы помещаете все свои "страницы" на страницу html и перемещаетесь оттуда. Или у вас может быть многостраничная архитектура. Вы всегда можете смешать это.

Чтобы физически изменить страницу, вам нужно добавить rel= external по вашей ссылке.