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等开 ...
随机推荐
- 阿里云：linux 一键安装web环境
参考地址:http://www.cnblogs.com/ada-zheng/p/3724957.html
- android输入法中的imeoption
SDK升级到1.5以后,当文本输入框(EditText及其子类)获得焦点后,会弹出系统自带的软键盘 为了实现一些自定义的功能,就稍微研究了下 * 当layout中有多个EditText,把每个控件的a ...
- 21、HierarchyViewer使用记录
1.是啥 HierachyViewer是一种能够方便开发人员了解activity中的布局信息的工具. 2.异常 HierachyViewer在未root过的设备或者低版本的设备是无法使用的 3.怎么办 ...
- android 自动化压力测试-monkey 2 获取程序包名
monkey 1 中我们写到: C:\Users\chenshan>adb shell shell@hwG750-T20:/ $ monkey -p cn.emoney.acg -v 500 说 ...
- C#--简单的串口通信程序
前几天做毕业设计,其中要用到串口和下位机进行通信,于是自己捣鼓了一个简单的串口通信程序. 在做通信之前要先弄一个SerialPort组件出来,当然也可以通过程序来创建.本次设计中采用的是拖的winfo ...
- 【BZOJ】【1492】【NOI207】货币兑换Cash
DP/CDQ分治 orz Hzwer copy了下他的代码……结果在while(j<top......)这一句中把一个括号的位置打错了……找了我一个多小时才找到TAT 很神奇……顺便贴下CDQ的 ...
- BZOJ3170: [Tjoi 2013]松鼠聚会
3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 531 Solved: 249[Submit][Statu ...
- Leetcode#137 Single Number II
原题地址 遍历所有数字,统计每一位出现的次数,模3即为只出现一次的数字在那一位的情况. 代码: int singleNumber(int A[], int n) { ] = {}; ; i < ...
- share干什么的
share到底干什么的 //--------------------打开GameServer,share中加载------------------------- .加载nBodyID //玩家的nBo ...
- phonegap/cordova常用命令
创建项目 cordova create foldername com.wps.test projectName cd foldername 基本设备信息 设备 API: cordova plugin ...