您的位置：首页 > Web前端 > JavaScript

Seajs demo

2014-03-11 00:25 405 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航