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;

})

Seajs demo的更多相关文章

  1. Seajs使用实例入门介绍

    本文所用例子的代码目录结构: seajs example |--sea-module //存在依赖文件 |--jquery |--jqeury.js |--sea.js |--static //存放自 ...

  2. seajs实例

    点击文本改变: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  4. 应用seajs 做了个向上滚动的demo

    目录结构式这样滴 sea sea-module jquery-1.10.2.min.js sea.js static css t.min.css img test test.min.js main.j ...

  5. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  6. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  7. 用spm2构建seajs项目的过程

    前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...

  8. 深入seajs源码系列三

    入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个 ...

  9. 深入seajs源码系列二

    模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 首先定义了一个Module类,对应与一个模块 funct ...

随机推荐

  1. css图片切换效果分析+翻译整理

    Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/1 ...

  2. 浅谈IT认识

    我理解的IT       新华电脑学院,引领IT潮流.这句耳熟能详的广告语,从小就在我的记忆里深存,当看到别人QQ用黑客技术刷了好多钻,于是乎无比的向往这种黑客技术,后来网上购物更是在互联网上一疯而起 ...

  3. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  4. 【BZOJ】【3238】【AHOI2013】diff（差异）

    题目链接:www.lydsy.com/JudgeOnline/problem.php?id=3238 后缀数组 这题题面给的暗示性就很强啊……一看就是要用后缀xx一家的算法,由于本蒻只会后缀数组所以就 ...

  5. 查找出现次数大于n/k的重复元素

    本文是对一篇英文论文的总结:Finding Repeated Elements.想看原文,请Google之. 这个问题的简单形式是“查找出现次数大于n/2的重复元素”.我们先从简单问题开始,然后再做扩 ...

  6. Codeforces Round #216 (Div. 2)解题报告

    又范低级错误! 只做了两题!一道还被HACK了,囧! A:看了很久!应该是到语文题: 代码:#include<iostream> #include<];    ,m2=;    ;i ...

  7. 高达渐出现效果Shader

    原地址: http://liweizhaolili.blog.163.com/blog/static/1623074420140591864/ 最近在玩游戏<高达破坏者>,里面的高达出现的 ...

  8. ErrorCode枚举类型返回错误码信息测试，手动抛出异常信息，在事务中根据错误码来回滚事务的思路。

    ErrorCode.java 简单测试代码,具体应用思路:手动抛出异常信息,在事务中根据错误码来回滚事务的思路. public enum ErrorCode { //系统级 SUCCESS(" ...

  9. Linux 双线策略路由的三种实现方式总结＋端口映射

    Linux 双线策略路由的三种实现方式总结+端口映射 Linux 双线策略路由的三种实现方式总结+端口映射 网络环境 服务器(网关): eth0 为LAN口,IP为 LAN_IP = 192.168. ...

  10. 调用MYSQL存储过程实例

    PHP调用MYSQL存储过程实例 http://blog.csdn.net/ewing333/article/details/5906887 http://www.cnblogs.com/kkchen ...