index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="seajs/sea.js"></script>
</head>
<body> <ul class="pills">
<li class="home-pill"><a>Home</a></li>
<li class="about-pill"><a>About</a></li>
<li class="contact-pill"><a>Contact</a></li>
</ul> <div id="home-page" class="pages">Hi I'm the home page!</div>
<div id="about-page" class="pages">Hi I'm the about page!</div>
<div id="contact-page" class="pages">Hi I'm the contact page!</div>
<script>
seajs.config({
base: '../example-2',
alias: {
'jquery': 'lib/jquery-latest.js',
'underscore': 'lib/underscore.js',
'backbone': 'lib/backbone.js',
'AppRoute': 'router/AppRoute.js',
'AppView': 'view/AppView.js'
}
});
seajs.use(['AppRoute', 'AppView'], function (AppRoute, AppView) {
new AppView();
});
</script>
</body>
</html>
define(['jquery', 'underscore', 'backbone'], function (require, exports, module) {
var ApplicationRoute = Backbone.Router.extend({
routes: {
"": "home",
"home": "home",
"about": "about",
"contact": "contact"
},
deselectPills: function(){
$('ul.pills li').removeClass('active');
},
selectPill: function(pill){
this.deselectPills();
$(pill).addClass('active');
},
hidePages: function(){
$('div.pages').hide();
},
showPage: function(page){
this.hidePages();
$(page).show();
},
home: function() {
this.showPage('div#home-page');
this.selectPill('li.home-pill');
},
about: function() {
this.showPage('div#about-page');
this.selectPill('li.about-pill');
},
contact: function() {
this.showPage('div#contact-page');
this.selectPill('li.contact-pill');
}
});
module.exports = ApplicationRoute;
});
define('AppView', ['jquery', 'underscore', 'backbone', 'AppRoute'], function (require, exports, module) {
var ApplicationRoute = require('AppRoute');
var AppView = Backbone.View.extend({
el: $('body'),
events: {
'click ul.pills li.home-pill a': 'displayHome',
'click ul.pills li.about-pill a': 'displayAbout',
'click ul.pills li.contact-pill a': 'displayContact'
},
initialize: function(){
this.router = new ApplicationRoute();
Backbone.history.start();
},
displayHome: function(){
this.router.navigate("home", true);
},
displayAbout: function(){
this.router.navigate("about", true);
},
displayContact: function(){
this.router.navigate("contact", true);
}
});
module.exports = AppView;
})