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. MyEclipse2015 编写js报 'Calculating completion proposals..' has encountered a problem.

    前言:编写js(按点后)弹出这个鬼东西,百度不到..估计是破解有问题.只有换版本了. 版本:MyEclipse 2015 stable 1.0 详细错误信息 解决:换成2.0版本

  2. 使用log4javascript记录日志

    1.定义log4js服务类,用于初始化log4javascript相关参数 log4jsService.js //启用javascript 日志功能 var logger = log4javascri ...

  3. android解析XML总结（SAX、Pull、Dom三种方式） <转载>

    android解析XML总结(SAX.Pull.Dom三种方式) http://www.cnblogs.com/JerryWang1991/archive/2012/02/24/2365507.htm ...

  4. spring mvc注解@RequestParam

    在spring mvc 的使用过程中 获取 页面传来的参数的时候,我平时都习惯  @RequestParam String name,突然有一天我发现 直接在方法参数后面写 String name , ...

  5. C编译错误解决方法

    1.expected identifier before numeric constant 一般情况下是枚举类型中的某个变量已经被#define定义过一次了,在项目空间中搜索你枚举类型中的所有变量类型 ...

  6. 偏序集的Dilworth定理

    定理1 令(X,≤)是一个有限偏序集,并令r是其最大链的大小.则X可以被划分成r个但不能再少的反链.其对偶定理称为Dilworth定理:定理2 令(X,≤)是一个有限偏序集,并令m是反链的最大的大小. ...

  7. Apache CXF实现Web Service（3）——Tomcat容器和不借助Spring的普通Servlet实现JAX-RS(RESTful) web service

    起步 参照这一系列的另外一篇文章: Apache CXF实现Web Service(2)——不借助重量级Web容器和Spring实现一个纯的JAX-RS(RESTful) web service 首先 ...

  8. MYSQL注入天书之宽字节注入

    Background-7 宽字节注入 Less-32,33,34,35,36,37六关全部是针对'和\的过滤,所以我们放在一起来进行讨论. 对宽字节注入的同学应该对这几关的bypass方式应该比较了解 ...

  9. 修改MySQL数据库的密码

    通过MySQL命令行,可以修改MySQL数据库的密码,下面就为您详细介绍该MySQL命令行,如果您感兴趣的话,不妨一看. 格式:mysql -u用户名 -p旧密码 password 新密码 1.给ro ...

  10. BZOJ2199: [Usaco2011 Jan]奶牛议会

    趁此机会学了一下2-SAT. 以前的2-SAT都是用并查集写的,只能应用于极小的一部分情况,这次学了一正式的2-SAT,是用一张有向图来表示其依赖关系. 2-SAT的介绍参见刘汝佳<训练指南&g ...