Question

我是Javascript的新手，也是使用Ratchet的新手。我尝试构建一个小应用程序来熟悉。我编写了以下代码，但这些代码并不常用。在后退按钮我想得到我的javascript调用保存笔记。但我收到一个错误，即找不到note_back（）。我做错了什么？

的index.html

<!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>

note.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>

notecontroller.js

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";
}

截图：

（作为一个附带问题，为什么我看不到note.html？）

enter image description here

Answer 1

问题是note.html的head部分中的javascript链接未加载，因此您必须将所有javascript放在index.html中。

Ratchet使用push.js进行导航。当您单击导航时，棘轮通过ajax加载note.html并解析DOM的内容，因此您的javascript包含不会在后续页面上执行。

你需要做两件事：将你的脚本引用移到index.html，并从window.location.href（它将重置你的应用程序）更改你的控制器导航，以调用PUSH（{}）方法（附加到具有正确选项的ratchet.js中的窗口。

如何在棘轮中使用onclick事件？

1 个答案: