To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

Seajs demo

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

 

posted on 2014-03-11 00:25  Ijavascript  阅读(495)  评论(0)  编辑  收藏  举报