index.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello, Backbone</title>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="menu"> <!-- Блок меню -->
<ul>
<li><a href="#!/">Start</a></li>
<li><a href="#!/success">Success</a></li>
<li><a href="#!/error">Error</a></li>
</ul>
</div>
<div id="start" class="block">
<div class="userplace">
<label for="username">Имя пользователя: </label>
<input type="text" id="username" />
</div>
<div class="buttonplace">
<input type="button" value="Проверить" />
</div>
</div>
<div id="error" class="block">
Ошибка такой пользователь не найден.
</div>
<div id="success" class="block">
Пользователь найден.
</div>
</body>
</html>
index.js :
var Controller = Backbone.Router.extend({
routes: {
"": "start", // Пустой hash-тэг
"!/": "start", // Начальная страница
"!/success": "success", // Блок удачи
"!/error": "error" // Блок ошибки
},
start: function () {
$(".block").hide(); // Прячем все блоки
$("#start").show(); // Показываем нужный
},
success: function () {
alert("PP");
$(".block").hide();
$("#success").show();
},
error: function () {
$(".block").hide();
$("#error").show();
}
});
var controller = new Controller(); // Создаём контроллер
//Backbone.history.start(); // Запускаем HTML5 History push
Я так понимаю, должны вызываться события на роутере при клике на ссылках:
<div id="menu"> <!-- Блок меню -->
<ul>
<li><a href="#!/">Start</a></li>
<li><a href="#!/success">Success</a></li>
<li><a href="#!/error">Error</a></li>
</ul>
Не работает
