Seajs demo
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的更多相关文章
- Seajs使用实例入门介绍
本文所用例子的代码目录结构: seajs example |--sea-module //存在依赖文件 |--jquery |--jqeury.js |--sea.js |--static //存放自 ...
- seajs实例
点击文本改变: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- 应用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 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- 用spm2构建seajs项目的过程
前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...
- 深入seajs源码系列三
入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个 ...
- 深入seajs源码系列二
模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 首先定义了一个Module类,对应与一个模块 funct ...
随机推荐
- 线程生命周期状态UML图
- Oracle Client Language Problem
If you execute SP in the Oracle client and got the error like this: oracle.xdo.XDOException: oracl ...
- Facebook
Facebook登录为iOS Facebook的SDK为iOS提供了各种登录的经验,你的应用程序可以使用它来 验证一个人.这份文件包括了所有你需要知道,以落实Facebook登录在你的iOS应用程 ...
- [百度空间] ld: add library file reference by path & file name
By default, -l option will search libraries with lib* prefix in speficied search paths. i.e. 1 ld -o ...
- Docker学习资料
官方Docker:https://www.docker.com/ CSDN Docker : http://docker.csdn.net/ Docker中文社区:http://www.docker. ...
- Visual Event插件----查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
- 吊炸天的 PHP 7 ,你值得拥有
2015年的夏天,虽然来得不算火热,但是在互联网技术的夏天,比任何一年都更为火热. 刚刚才结束了 月底的网易.支付宝.携程以及多家云存储厂商的接连故障的坏消息,6月上旬则迎来了编程语言界两大好消息,第 ...
- 使用 Swagger UI 与 Swashbuckle 创建 RESTful Web API 帮助文件
作者:Sreekanth Mothukuru 2016年2月18日 本文旨在介绍如何使用常用的 Swagger 和 Swashbuckle 框架创建描述 Restful API 的交互界面,并为 AP ...
- netaddr 0.7.12
Pythonic manipulation of IPv4, IPv6, CIDR, EUI and MAC network addresses https://pypi.python.org/pyp ...
- 传说中的WCF(5):数据协定(a)
在第4篇中,咱们了解了发送/接收SOAP头,从本篇开头,我们不妨更深入地去探求一下有关WCF中的消息到底是啥玩意儿.WCF庞大而复杂,而从 MSDN文档中,你会看到许多很专业很抽象的东西,你不禁会问, ...