Почему я должен поместить весь скрипт в index.html в jquery mobile
Я использовал страницу $.mobile.change для перенаправления в моих проектах phonegap+jquerymobile. Однако меня смущает то, что мне нужно поместить скрипт всех страниц в один и тот же файл index.html. Если нет, страница перенаправления не может выполнить функцию в своем заголовке.
например, мой index.html кажется $(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
Затем мое устройство будет перенаправлено на test.html, который
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
Однако скрипт никогда не будет выполняться в test.html. Затем я помещаю скрипт в index.html, что, как я ожидаю, будет сделано. Как бы то ни было, если я перенесу весь сценарий на одну и ту же страницу, проект станет все сложнее и сложнее сохранить. Благодарим Вас за помощь.
3 ответа
вступление
Эту статью также можно найти ЗДЕСЬ как часть моего блога.
Как jQuery Mobile обрабатывает изменения страницы
Чтобы понять эту ситуацию, вам нужно понять, как работает jQuery Mobile. Он использует AJAX для загрузки других страниц.
Первая страница загружается нормально. это HEAD а также BODY загружается в DOM и они там, чтобы ждать другого контента. Когда загружена вторая страница, только ее BODY содержимое загружается в DOM, Точнее, даже BODY не полностью загружен. Будет загружен только первый div с атрибутом data-role="page", все остальное будет отброшено. Даже если у вас есть больше страниц внутри BODY только первый будет загружен. Это правило применяется только к последующим страницам, если у вас есть больше страниц в исходном HTML, все они будут загружены.
Вот почему ваша кнопка отображается успешно, но событие нажатия не работает. То же событие клика, чей родитель 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>
Это быстрое решение, но все еще ужасное.
Рабочий пример можно найти в моем другом ответе здесь: PageShow не запускается после изменения страницы
Другой рабочий пример: страница загружается по-другому с переходом 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 будет вести себя как обычное веб-приложение. К сожалению, это не очень хорошее решение в вашем случае. Phonegap никогда не должен работать как обычное веб-приложение.
<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, является самой важной вещью, которую вам нужно знать, прежде чем вы сможете успешно создать свое первое приложение.
В отличие от обычных обычных HTML-страниц, jQuery Mobile использует технологию ajax при навигации между страницами. Поэтому убедитесь, что вы импортировали все ваши JS-файлы и библиотеки на все ваши html-страницы.
Если вы внимательно заметите, вы увидите, что файлы JS с предыдущей страницы учитываются при загрузке второй страницы. Но если вы принудительно обновите текущую страницу, то js-файлы текущей страницы будут эффективными.
Поэтому, как я сказал ранее, убедитесь, что импортировали файлы js во все html-файлы.
Также не нужно звонить deviceready, используйте следующий синтаксис для вызова вашей страницы специфических функций js
$(document).on('pageshow', '#YourPageID', function(){
// Your code goes here
});
Jquery Mobile использует ajax для загрузки "страницы". "Страница" здесь - это div с data-role=page. Если вы загрузите физическую страницу index.html, вы можете перейти с помощью changePage к любому "page" div внутри этой страницы.
Однако, если вы хотите загрузить "страницу" с другой физической страницы, jQM загрузит только первый "page" div с этой страницы. Что на самом деле происходит, так это то, что вы не меняете страницу, jQM просто загружает этот конкретный div "page" с помощью ajax и вставляет его на вашу текущую страницу.
У вас есть две возможные архитектуры, где вы помещаете все свои "страницы" в html-страницу и переходите оттуда. Или вы можете иметь многостраничную архитектуру. Вы всегда можете смешать это.
Чтобы физически изменить страницу, вам нужно добавить rel=external к вашей ссылке.