2014-11-16 2 views
0

Я новичок в Javascript, а также в использовании Ratchet. Я пытаюсь создать небольшое приложение, чтобы познакомиться. Я написал следующий код, который не совсем работает. На обратной кнопке я хотел бы получить свой javascript, который сохраняет примечание. Но я получаю сообщение об ошибке note_back(). Что я делаю неправильно?Как использовать onclick событие в трещотке?

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

Scr eenshot:

(В качестве побочного вопроса, почему я не вижу note.html?)

enter image description here

+0

Вы не видите note.html, потому что ratchet.js использует ajax для загрузки содержимого для переходов страницы, поэтому ваше приложение ведет себя как SPA. Note.html извлекается, анализируется, и содержимое обменивается, а затем расположение окна устанавливается с помощью API истории – kindasimple

+0

Как вы называете PUSH? Я пытаюсь исправить это: http://stackoverflow.com/questions/30178538/how-do-i-trigger-ratchets-push-manually – jgauna

ответ

1

Проблема в том, что JavaScript ссылки в головной части note.html не загружены поэтому вы должны поместить весь свой javascript в index.html.

Ratchet использует push.js для навигации. Когда вы нажимаете, чтобы перемещаться, храповик загружает note.html через ajax и анализирует DOM для контента, поэтому ваш javascript не выполняется на последующих страницах.

Вам нужно сделать две вещи: переместите ссылку на скрипт на index.html и измените навигацию вашего контроллера из окна.location.href (который сбросит ваше приложение), чтобы вызвать метод PUSH ({}) (прикрепленный к окно в ratchet.js) с правильными параметрами.

Смежные вопросы