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等开 ...
随机推荐
- WEB实时聊天 comet推技术
转自:http://www.cnblogs.com/wodemeng/archive/2012/04/06/2435302.html 今天晚上朋友遇到web服务端推技术的问题,自己就查了下资料,学习了 ...
- 这个好像、也许、或许、大概、应该、Maybe真的可以算是传说中的Spring.Net了吧
这个好像.也许.或许.大概.应该.Maybe真的可以算是传说中的Spring.Net了吧 ...
- 文件读写器FileRW 1.0发布
这个软件未发布前,当年被计算机杂志报道过. FileRW 文件读写器 1.0功能介绍:1.可以以各种方式读普通文件和I/O文件.2.可以以各种方式写文件.3.可以配置文件的分享读写方式.4.可以指定文 ...
- hibernate---table_Generator
首先讲一下调试技巧:: @javax.persistence.TableGenerator( name="Teacher_GEN", table="GENERATOR_T ...
- 使用CSS时间打点的Loading效果的教程
基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...
- JS--传统事件模型的问题
事件绑定分为两种情况:传统的事件绑定(内联模型.脚本模型),一种是现代事件绑定模型(DOM2级事件绑定). 内联模型的事件绑定是将事件写在元素标签中,将事件绑定函数当做元素的一种属性来实现的,这种绑定 ...
- URAL
URAL 2035 输入x,y,c, 找到任意一对a,b 使得a+b==c&& 0<=a<=x && 0<=b<=y 注意后两个条件,顺序搞错 ...
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, ...
- 社区O2O，才是未来10年移动互联网最赚钱的项目
原文:http://blog.sina.com.cn/s/blog_70e76a920102uyoi.html 8月12日 上海 晴 从深圳回来后,一直和郭老师探讨一个问题:新媒体营销未来最大的市 ...
- Python中的元类和__metaclass__
1.什么是元类 元类让你来定义某些类是如何被创建的,从根本上说,赋予你如何创建类的控制权.可以把元类想成是一个类中类,或是一个类,它的实例是其它的类.当某个类调用type()函数时,你就会看到它到底是 ...