У меня есть страница, на которой я использую JQuery Mobile.Мне трудно понять, когда именно мои переменные видны.Я думал, что следующие были загружены в то же пространство памяти.Но я получаю ошибку.Прежде чем объяснить ошибку, позвольте мне показать код:
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
}
});
Когда я нажимаю кнопку «Первый», вызывается мой обработчик событий.Однако я получаю следующую ошибку:
ReferenceError: myCollection не определена
Мой вопрос: как я могу разделить переменные между этими двумя файлами?Я также обеспокоен конфликтами имен, поэтому я надеялся разделить пространство памяти так, как я пытался сделать это ниже.Что я делаю не так?
Спасибо.