Javascript 如何在ratchet中使用onclick事件?
我对Javascript和Ratchet都是新手。我尝试构建一个小应用程序来熟悉它。我已经编写了下面的代码,但不太有效。在“后退”按钮上,我希望调用javascript来保存注释。但是我得到一个错误,找不到note_back()。我做错了什么 index.htmlJavascript 如何在ratchet中使用onclick事件?,javascript,ratchet-2,Javascript,Ratchet 2,我对Javascript和Ratchet都是新手。我尝试构建一个小应用程序来熟悉它。我已经编写了下面的代码,但不太有效。在“后退”按钮上,我希望调用javascript来保存注释。但是我得到一个错误,找不到note_back()。我做错了什么 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Notes</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/ratchet.css" rel="stylesheet">
<script src="js/ratchet.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-plus pull-right" data-transistion="slide-in" href="note.html"></a>
<h1 class="title">Notes</h1>
</header>
<div class="content">
<ul class="table-view">
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Note</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/ratchet.css" rel="stylesheet">
<script src="js/ratchet.js"></script>
<script src="js/notecontroller.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-left pull-left" onclick="javascript:note_back()"></a>
<a class="icon icon-trash pull-right" onclick="javascript:note_delete()"></a>
<h1 class="title">Add Note</h1>
</header>
<form>
<br>
<br>
<br>
<textarea id="notetext" rows="10"></textarea>
</form>
</body>
</html>
截图:
(作为一个附带问题,为什么我看不到note.html?)
问题在于note.html的head部分中的javascript链接没有加载,因此您必须将所有javascript都放在index.html中 Ratchet使用push.js进行导航。当您单击导航时,ratchet通过ajax加载note.html并解析DOM中的内容,因此您的javascript包含不会在后续页面上执行
您需要做两件事:将脚本引用移动到index.html,并将控制器导航从window.location.href(这将重置您的应用程序)更改为调用PUSH({})方法(附加到ratchet.js中的窗口)使用正确的选项。您看不到note.html,因为ratchet.js使用ajax加载页面转换的内容,所以您的应用程序的行为就像SPA。检索、解析Note.html并交换内容,然后使用历史记录设置窗口位置。如何调用PUSH?我正试图解决这个问题:
function note_back() {
console.log("reached note_back");
localStorage.setItem("note",document.getElementById("notetext"));
window.location.href="index.html";
}
function note_delete() {
console.log("reached note_delete");
localStorage.removeItem("note");
window.location.href="index.html";
}