Я знаю, что когда вы переключаете страницы с помощью jquery mobile, используя ajax, он удерживает DOM в теле только с data-role="page". Проблема в том, что это приложение с телефонной пробкой, работающее на мобильном устройстве, поэтому полная загрузка страниц без ajax происходит довольно медленно, получая все сценарии JS, CSS.
Я искал, пробуя разные вещи. В документах говорится, что вы можете добавить javascript к dom и поместить его под элемент data-role="page", но я до сих пор не могу заставить его срабатывать таким образом.
В настоящее время я пытаюсь использовать скрипт начальной загрузки, который включен в начало первой страницы, и при смене страницы он пытается вставить js, специфичные для этой страницы, в dom
function insertScript(script, container) {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'Assets/Scripts/' + script + '.js';
container.appendChild(elem);
}
$(document).bind('pagechange', function(event){
//get the path to the html asset
var path = document.location.pathname;
//split up
var arr = path.split('/');
//get the relevant part of the path ie index.html
var page = arr[arr.length-1];
// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
var pages = $('div[data-role="page"]'),
// the current page is always the last div in the Array, so we store it in a variable
currentPage = pages[pages.length-1];
//if the page is index add index.js to the last dom node
if (page == 'index.html') {
insertScript('index', currentPage);
}
});
Тогда, например, index.js имеет следующий
$("#start_page").live('pageinit', function() {
alert('on start page');
});
но функция Pageinit никогда не срабатывает. Любые идеи
** редактировать:
У меня есть несколько html-страниц, например, index.html и home.html
* index.html
<html>
<head>
<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$("#index_page").live('pageinit', function() {
//do some page specific js functions for index.html
});
</head>
<body>
<div data-role="page" id="index_page">
<a href='home.html'>go to home page</a>
</div>
</body>
</html>
** home.html
<html>
<head>
<script type="text/javascript">
$("#home_page").live('pageinit', function() {
//this is the JS I want to pull
});
</head>
<body>
<div data-role="page" id="home_page">
<h1>this is the home page</h1>
</div>
</body>
</html>
Итак, что произойдет, когда я нажму на ссылку из индекса в дом, обновится dom, но любой JS на странице home.html НЕ будет вставлен на страницу через AJAX, поэтому я пытаюсь найти способ сделай это.
Я знаю, что могу включить ВСЕ мои js на одной странице, но я действительно пытаюсь избежать этого, потому что у меня много страниц, и это быстро станет грязным.