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. 简单的linux命令笔记

    以下命令都是在ubuntu环境下执行 ftp启动 sudo service vsftpd start

  2. 15、android 用toast实现简单的进度显示

    if(mtoast!=null) { mtoast.setText(progress); } else { mtoast=Toast.makeText(getApplicationContext(), ...

  3. 剔除数组或List中重复的元素

    import java.util.Arrays; import java.util.Collection; import java.util.HashSet; import java.util.Lis ...

  4. HDU 5446 Unknown Treasure Lucas+中国剩余定理

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5446 Unknown Treasure 问题描述 On the way to the next se ...

  5. 01.JSP基础语法

        本章主要讲解Java Web与JSP的入门内容,适合有JSP或Java Web基础的读者学习. 1.Web应用与web.xml文件 (1)Java Web应用程序的结构     Java We ...

  6. 推荐系统之LFM

    这里我想给大家介绍另外一种推荐系统,这种算法叫做潜在因子(Latent Factor)算法.这种算法是在NetFlix(没错,就是用大数据捧火<纸牌屋>的那家公司)的推荐算法竞赛中获奖的算 ...

  7. Sencha Touch2 时间轴ListPanel

    直接贴代码 timeline.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  8. VC5509的通用GEL代码

    GEL是通用扩展语言(General Extension Language)的英文缩写,GEL是一个大小写敏感但缺少类型检测的解释性语言,只有int类型,在语法上可看作是C语言的一个子集.GEL主要用 ...

  9. ios 7 20像素解决

    1.if ([[[UIDevicecurrentDevice] systemVersion] floatValue] >= 7) { self.view.bounds = CGRectMake( ...

  10. mybatis处理查询map列表属性为null的问题，而导致查询map无该key对象

    1.常规处理方法(数据库以mysql为例) IFNULL(m.last_use_time,) ) ) as last_lat if判断是否为null,设置一个默认值. 2.前台jsp页面处理,判断是否 ...