IBM Worklight - 如何在多页面应用程序中重用函数 [英] IBM Worklight - How to re-use a function in a multipage app
问题描述
我在页面级别-1-1上使用了函数 doTimer（），现在我正在尝试重用函数 doTimer （）在第二页上。但它不起作用。任何人都可以帮助我吗？
I have used the function doTimer() on the page level-one-1, and now I'm trying to reuse the function doTimer() on the second page. But it doesn't work. Can anyone help me?
这是我的javascript和html代码。
Here is my javascript and html code.
JS：
var start = new Date().getTime();
var elapsed = '0.0';
var t;
var timer_is_on=0;
function timedCount() {
var time = new Date().getTime() - start;
elapsed = Math.floor(time / 100) / 10;
if(Math.round(elapsed) == elapsed) { elapsed += '.0'; }
document.getElementById('txt').value=elapsed;
t=setTimeout("timedCount()",50);
}
function doTimer() {
if (!timer_is_on) {
start = new Date().getTime();
timer_is_on=1;
timedCount();
}
}
function stopCount() {
clearTimeout(t);
timer_is_on=0;
}
function resetCount() {
document.getElementById('txt').value='0.0';
var elapsed = '0.0';
}
HTML：
<!-- Page Level 1-1 start -->
<div id="level-one-1" data-role="page" >
<div data-role="header">
<h1>StarKids</h1>
</div>
<div data-role="content">
<table>
<tr>
<td id="level-1">Level 1</td>
<td colspan="3" id="center-top"></td>
<td id="txt">
</td>
</tr>
<tr>
<td id="settings">Setting</td>
<td colspan="3" id="center-top">Which animal is monkey?</td>
<td id="overallscore"></td>
</tr>
<tr>
<td colspan="2"><a onclick="checkAnswer1a()"><img id="tortoise" src="images/duck.png" ></a></td>
<td><img id="elephant" src="images/duck.png" onclick="checkAnswer1a()"></td>
<td colspan="2"><img id="giraffe" src="images/duck.png" onclick="checkAnswer1a()"></td>
</tr>
<tr>
<td colspan="2"><img id="monkey" src="images/duck.png" onclick="checkAnswer1a()"></td>
<td></td>
<td colspan="2"><img id="owl" src="images/duck.png" onclick="checkAnswer1a()"></td>
</tr>
<tr>
<td colspan="5" id="next"><a href="#level-one-2" onclick="stopCount();">Next</a></td>
</tr>
</table>
</div>
<div data-role="footer">
<!-- Copyright © anitaagustina 2013 -->
</div>
</div>
<!-- Page Level 1-1 end -->
<!-- Page Level 1-2 start -->
<div id="level-one-2" data-role="page" onload="doTimer()">
<div data-role="header">
<h1>StarKids</h1>
</div>
<div data-role="content" >
<table id="tabel-soal">
<tr>
<td id="level-1">Level 1</td>
<td colspan="3"> </td>
<td id="txt">
</td>
</tr>
<tr>
<td id="settings">Setting</td>
<td colspan="3">Match each word to its picture</td>
<td id="overallscore"></td>
</tr>
<tr>
<td> </td>
<td>image:elephant</td>
<td>image:elephant</td>
<td>image:elephant</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>empty-box</td>
<td>empty-box</td>
<td>empty-box</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>answer-choice-1</td>
<td>answer-choice-2</td>
<td>answer-choice-3</td>
<td> </td>
</tr>
<tr>
<td colspan="5">Next</td>
</tr>
</table>
</div>
<div data-role="footer">
<!-- Copyright © anitaagustina 2013 -->
</div>
</div>
<!-- Page Level 1-2 end -->
推荐答案
你没有在WHICH .js文件中提到你有放置此功能也不如何在页面之间导航。 这是至关重要的信息。将此信息添加到您的问题中。
You do not mention in WHICH .js file you have placed this function nor how do you navigate between pages. This is crucial information. Add this information to your question.
在 Worklight 6.1 应用程序 - 的上下文中，不知道任何其他信息你的项目 - 我的建议是将此函数放在 common \ js \main.js 文件中。此 main.js 文件在Worklight应用程序的 index.html <的 HEAD 中引用/ code> file。
In the context of a Worklight 6.1 application - without knowing anything else about your project - my suggestion is to place this function in the common\js\main.js file. This main.js file is referenced in the HEAD of your Worklight application's index.html file.
要重复使用此功能，您可以通过替换<$ c中的DIV内容在页面之间导航$ c> index.html 文件使用jQuery的加载 API方法。这样，无论您要加载哪个页面，该函数始终可用。
To reuse this function, you can then for example navigate between "pages" by replacing the contents of a DIV within the index.html file by using jQuery's load API method. This way the function is always available no matter which "page" you are loading.
这是实现页面加载的两个示例项目：
These are two sample projects that implement "page" loading:
- JQM_multipage_load_changePage.zip - 使用
.load或.changePage - JQM_multipage_changePage_pageshow.zip - 使用
.changePage和.pageShow
- JQM_multipage_load_changePage.zip - uses either
.loador.changePage - JQM_multipage_changePage_pageshow.zip - uses
.changePageand.pageShow
编辑：在回答的评论中使用提供的演示项目，我在其中更改了以下内容：
using the provided demo project in the comments to this answer, I have changed the following in it:
-
更改此：
Change this:
$(document).on("pageshow", "#one", function( event ) {
alert( "page 1 loaded" );
});
$(document).on("pageshow", "#two", function( event ) {
alert( "page 2 loaded" );
});
到此：
$(document).on("pageshow", "#one", function( event ) {
alert( "page 1 loaded" );
stopCount();
doTimer();
});
$(document).on("pageshow", "#two", function( event ) {
alert( "page 2 loaded" );
stopCount();
doTimer();
});
验证 doTimer（），你可以在 doTimer（）里面添加一个警告，比如 alert（在doTimer中）;
To verify doTimer() is indeed called, you can add an alert inside doTimer(), like alert ("in doTimer");
要验证 stopCount（）确实已调用，您可以在<$ c内添加警报$ c> doTimer（），如 alert（在stopCount中）;
To verify stopCount() is indeed called, you can add an alert inside doTimer(), like alert ("in stopCount");
从HTML中删除 onload ：
来自：
< div id =level-one-2data-role =pageonload =doTimer（）>
收件人：
< div id =level-one-2data-role =page>
这篇关于IBM Worklight - 如何在多页面应用程序中重用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
