У меня есть страница, на которой я использую JQuery Mobile. Мне трудно понять, когда видны мои переменные. Я думал, что следующее загружено в одно и то же пространство памяти. Но я получаю сообщение об ошибке. Прежде чем объяснить ошибку, позвольте мне показать код:JQuery Mobile - JavaScript Visibility
page.html
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="myPage" data-role="page">
<div data-role="header">
<h1>My App</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a"><input type="button" value="First" onclick="return button1_Click();" /></div>
<div class="ui-block-b"><input type="button" value="Second" onclick="return button2_Click();" /></div>
</div>
</div>
<script type="text/javascript">
var currentIndex = 0;
function button1_Click() {
alert(myCollection.length);
}
function button2_Click() {
}
</script>
</div>
</body>
</html>
App.js
$("#myPage").live("pagecreate", function() {
});
$("#myPage").live("pagebeforeshow", function() {
});
$("#myPage").live("pageshow", function() {
var myCollection = loadCollection();
function loadCollection() {
// do stuff
}
});
При нажатии на кнопку "First", мое событие вызывается обработчик. Тем не менее, я получаю следующее сообщение об ошибке:
ReferenceError: MyCollection не определен
Мой вопрос, как я могу разделить переменные между этими двумя файлами? Я также обеспокоен конфликтами имен, поэтому я надеялся разделить пространство памяти так, как я попытался ниже. Что я делаю не так?
спасибо.