Backbone seajs demo2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="sea/sea.js"></script>
</head>
<body> <div id="container"> </div> <!-- template --> <script type="text/html" id="book-view">
<span class="book-pane">
<img src="<%= image %>" alt="<%= title %>">
<p><a href="#subject/<%= id %>"><%= title %></a></p>
</span>
</script> <script type="text/html" id="demo-view">
<span class="book-item">
<img src="<%= image %>" alt="<%= title %>">
<p><a href="<%= alt %>"><%= title %></a></p>
</span>
</script> <script>
seajs.config({
base: '../example-3',
alias: {
'jquery': 'lib/jquery.js',
'underscore': 'lib/underscore.js',
'backbone': 'lib/backbone.js',
'DemoCollection': 'js/collections/DemoCollection',
'DemoModel': 'js/models/DemoModel',
'DemoApp': 'js/views/DemoApp',
'DemoView': 'js/views/DemoView',
'DemoRoute': 'js/routers/DemoRoute',
'DemoBooksDetail': 'js/views/DemoBooksDetail'
}
}); seajs.use('DemoApp', function (DemoApp) {
new DemoApp();
Backbone.history.start();
}); </script>
</body>
</html>
define('DemoApp', ['jquery', 'underscore', 'backbone', 'DemoCollection', 'DemoView', 'DemoRoute', 'DemoBooksDetail'], function (require, exports, module) {
'use strict';
var DemoCollection = require('DemoCollection'),
DemoView = require('DemoView'),
DemoRoute = require('DemoRoute'),
DemoBooksDetail = require('DemoBooksDetail');
var demoCollection = new DemoCollection();
var demoRoute = new DemoRoute();
demoRoute.on('route:home', function () {
demoRoute.navigate('home', {
trigger: true,
replace: true
});
});
demoRoute.on('route:subJectAction', function (id) {
var booksItem = demoCollection.get(id),
booksView;
booksView = new DemoBooksDetail({
model: booksItem
});
$('#container').html(booksView.render().el);
});
var DemoApp = Backbone.View.extend({
el: 'body',
initialize: function () {
var that = this;
this.listenTo(demoCollection, 'reset', this.render);
demoCollection.fetch({
success: function (e) {
that.render();
}
});
},
render: function () {
demoCollection.each(this.addOne, this);
},
addOne: function (item) {
var view = new DemoView({
model: item
});
$('#container').append(view.render().el);
}
});
module.exports = DemoApp;
});
define('DemoCollection', ['jquery', 'underscore', 'backbone', 'DemoModel'], function (require, exports, module) {
'use strict';
var DemoModel = require('DemoModel');
var DemoCollection = Backbone.Collection.extend({
model: DemoModel,
url: 'https://api.douban.com/v2/book/search?q=javascript',
parse: function (response) {
return response.books;
},
sync: function (method, model, options) {
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: this.url,
processData: false
}, options);
return $.ajax(params);
}
});
module.exports = DemoCollection;
});
define('DemoRoute', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {
'use strict';
var DemoRoute = Backbone.Router.extend({
routes: {
'': 'home',
'subject/:id': 'subJectAction'
}
});
module.exports = DemoRoute;
})
define('DemoBooksDetail', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {
'use strict';
var DemoBooksDetail = Backbone.View.extend({
template: _.template($('#demo-view').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
module.exports = DemoBooksDetail;
});
define('DemoModel', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {
'use strict';
var DemoModel = Backbone.Model.extend({
defaults: function () {
return {
id: '',
image: '',
title: '',
alt: ''
}
}
});
module.exports = DemoModel;
});
define('DemoView', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {
'use strict';
var DemoView = Backbone.View.extend({
template: _.template($('#book-view').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
module.exports = DemoView;
});
Backbone seajs demo2的更多相关文章
- Backbone seajs
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初学seaJs模块化开发，利用grunt打包，减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- 使用backbone的history管理SPA应用的url
本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...
- 第四课：seajs的模块编译_compile过程
最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 1 ...
- 构建seajs业务模块之grunt VS spm build
在最开始,我并不知道grunt可以构建CMD模块.(以下spm指代spm build) 当时正困惑于如何用spm方便的构建业务模块,后来看到@twinstony (感谢@twinstony的分享)使用 ...
- seajs+spm之再研究
好久没有用seajs了,之前对spm也只是一知半解,这些天再次拿起来研究.谈谈我的认识与理解. 声明:本文不适合对seajs完全不了解的同学阅读.对于想知道seajs来龙去脉以及spm相关的同学&qu ...
- Seajs demo
index.html <!doctype html> <html lang="en"> <head> <meta charset=&quo ...
- seajs第二节，seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- Backbone设计思路和关键源码分析
一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端MVC模式,这个模式也是前端开发演变过程中的一个重要里程碑,也为MVVM和Redux等开 ...
随机推荐
- C#使用Socket登陆WordPress源码
就在昨晚,在本屌丝刚刚发布屌丝与女神的回忆史<C#外挂QQ找茬辅助源码,早期开发>后,在苏飞大哥的技术讨论群有个群友提出一个问题.使用http协议模拟工具可以登录成功Wordpress但是 ...
- 使用sqlserver日期函数获取当前日期
使用sqlserver日期函数中的getdate()可以获取当现的日期,下面就将为您介绍这种使用sqlserver日期函数获取当前日期的方法,供您参考,希望对您学习sqlserver日期函数有所启迪. ...
- window8左下角窗口和右上角窗口失效解决方法
win8系统有时会出现任务栏和桌面点击没反应 小常识: “Windows徽标键” 这个键,左右各一个,称为“Windows徽标键”,键冒上的图案为Windows徽标,由此得名. [知识链接]位于计算机 ...
- 【BZOJ】【2765】【JLOI2010】铁人双项比赛
计算几何/半平面交 本来我是想去写POJ 1755的,然后想起了这道跟它很像的题,但应该是弱化版,所以就先写了这个…… 我们可以发现每个人的总用时,与k是呈一次函数关系的:$time_i=\frac{ ...
- 【BZOJ】【1052】【HAOI2007】覆盖问题
二分+贪心 首先二分L,转化成判定问题…… 但是判定不会判啊QAQ orz hzwer,用一个最小的矩形框住所有点后,直接往矩形的角上摆正方形……第二个用同样的方法摆,最后判一下剩下的能否被完全覆盖 ...
- linux系统非ROOT用户80端口不能启动tomcat问题的变通办法——通过Iptables端口转发
2010-07-17 13:21:42 org.apache.tomcat.util.digester.SetPropertiesRule begin 警告: [SetPropertiesRule]{ ...
- Linux 搭建SVN 服务器（转）
一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository) 中 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- ubuntu修改ip、网关、dns等
一.使用命令设置Ubuntu IP地址 1.修改配置文件blacklist.conf禁用IPV6 sudo vi /etc/modprobe.d/blacklist.conf 表示用vi编辑器(也可以 ...
- Fbric、Ansible、Docker、Chaos Monkey：DevOps工具的年中回顾
Fbric.Ansible.Docker.Chaos Monkey:DevOps工具的年中回顾 [编者按]近日,Cyber Engineering Solutions Group 技术经理 Hasan ...