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

【问题标题】：How to use onclick event in ratchet?如何在棘轮中使用 onclick 事件？
【发布时间】：2015-01-13 17:08:35
【问题描述】：

我是 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？）

【问题讨论】：

您看不到 note.html，因为 ratchet.js 使用 ajax 加载页面转换的内容，因此您的应用程序的行为类似于 SPA。 Note.html被检索、解析、内容交换，然后使用history API设置窗口位置
如何调用 PUSH ？我正在尝试解决这个问题：stackoverflow.com/questions/30178538/…

标签： javascript ratchet-2

【解决方案1】：

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

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

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

【讨论】：