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. [转载]char * 和char []的区别---之第一篇

    char *  和char []的区别---之第一篇 原文地址http://blog.csdn.net/yahohi/article/details/7427724 在C/C++中,指针和数组在很多地 ...

  2. 心情符号love

    写点什么呢,先谢谢心情吧,算是第一个脚印了,想先把之前的一些笔记和心得迁移进来吧,以后每个月都要充实自己的知识.向大婶们看齐.走你们走过的脚印,看你们前行的身影.沿着你们留下的路,继续为后者拓宽道路. ...

  3. python 解析web接口的json数据

    实例1-使用urllib2 #utf-8 import urllib2 import json url="http://xxx.com" #获取json格式的字符串 page=ur ...

  4. Installing Ruby 1.9.3 on Ubuntu 12.04 Precise Pengolin (without RVM)

    02 MAY, 2012 The new Ubuntu release has just rolled around and with it a slew of new packages. Perso ...

  5. Dijkstra--POJ 2502 Subway（求出所有路径再求最短路径）

    题意: 你从家往学校赶,可以用步行和乘坐地铁这两种方式,步行速度为10km/h,乘坐地铁的速度为40KM/h.输入数据的第一行数据会给你起点和终点的x和y的坐标.然后会给你数目不超过200的双向地铁线 ...

  6. java加载机制整理

    本文是根据李刚的<疯狂讲义>作的笔记,程序有的地方做了修改,特别是路径,一直在混淆,浪费了好多时间!!希望懂的同学能够指导本人,感激尽............ 1.jvm 和 类的关系 当 ...

  7. nodeJs入门篇之认识nodejs

    摘要:将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开 ...

  8. js生成唯一值的函数

    利用了js的闭包性质 var uniqueNumber = (( function(){ var value = 0; return function(){ return ++value; }; }) ...

  9. JAVA float double数据类型保留2位小数点5种方法

    /** * Java 两个整数相除保留两位小数,将小数转化为百分数 * java中,当两个整数相除时,由于小数点以后的数字会被截断,运算结果将为整数,此时若希望得到运算结果为浮点数,必须将两整数其一或 ...

  10. [Qt] 界面美化 [2013-06-17更新]（转载）

    - 经验总结 1. 可用对话框(QDialog)模拟类似Android中toast的效果.     - 设置程序界面风格 在main函数中QApplication::setStyle("wi ...