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