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. 【Integer To Roman】cpp

    题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from ...

  2. mongodb 操作类

    在使用这个类之前,建议先自己去写,把方法都了解了再用,这样你就可以在适当的时候修个此类,另外请自己构建PagerInfo using System; using System.Collections. ...

  3. windows python 打印utf-8乱码

    从网上抓了一些字节流,想打印出来结果发生了一下错误: UnicodeEncodeError: 'gbk' codec can't encode character '\xbb' in position ...

  4. Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) C - Bear and Colors

    题目链接: http://codeforces.com/contest/673/problem/C 题解: 枚举所有的区间,维护一下每种颜色出现的次数,记录一下出现最多且最小的就可以了. 暴力n*n. ...

  5. LAMP环境的搭建

    [一些前言废话]一名web开发尤其是后端不懂LAMP环境的搭建,那就摊上事了,有些人说他一直用win下的wampServer这种傻瓜式环境搭建,用的挺好的,也有人说他用云服务器,搭配“一键搭建LAMP ...

  6. Linux - 常用命令行（一）

    今天和大家分享一些最基本常用命令行:也是作为新手最应该了解掌握的 ls 命令:用来显示指定工作目录下内容 dir命令:与ls命令一致 cd  命令:变化工作目录 pwd命令:显示用户当前的工作路径,显 ...

  7. Least Common Ancestors 分类： ACM TYPE 2014-10-19 11:24 84人阅读 评论(0) 收藏

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  8. NYOJ-32 组合数 AC 分类： NYOJ 2013-12-30 07:42 189人阅读 评论(0) 收藏

    #include<stdio.h> int num[100]; int pnum(int n,int v); int mv=0; int main(){ int n,v; scanf(&q ...

  9. Nginx负载均衡介绍

    Nginx真心牛逼 nginx不单可以作为强大的web服务器,也可以作为一个反向代理服务器,而且nginx还可以按照调度规则实现动态.静态页面的分离,可以按照轮询.ip哈希.URL哈希.权重等多种方式 ...

  10. 帝国cms无法注册登录快速解决方法 附路径

    帝国cms安装相对比较简单,一路next,一般从网上下载的系统都会带一些数据,恢复备份数据后,清除缓存,更新数据,一个copy版的网站就出来了.但是为了se的友好需要改动很多地方,不然很容易被认为是s ...