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等开 ...
随机推荐
- Careercup - Google面试题 - 6331648220069888
2014-05-08 22:27 题目链接 原题: What's the tracking algorithm of nearest location to some friends that are ...
- 【Convert Sorted Array to Binary Search Tree】cpp
题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...
- ubuntu1404_server搭建lamp
ubuntu server版可直接一键安装lamp环境 apt-get install lamp-server^ 根据提示输入所需设置密码即可,其配置文件跟编译安装的apached等区别很大 apac ...
- 简单的表视图UITableView
1.建一个Single View application 2.在故事板中放置一个Table View控件 3.在.h文件中加入协议 <UITableViewDataSource,UITableV ...
- The Brain vs Deep Learning Part I: Computational Complexity — Or Why the Singularity Is Nowhere Near
The Brain vs Deep Learning Part I: Computational Complexity — Or Why the Singularity Is Nowhere Near ...
- date format 精辟讲解
link: http://stackoverflow.com/questions/19533933/nsdateformatter-how-to-convert-wed-23-oct-2013-045 ...
- .NET设计模式（17）：命令模式（Command Pattern）（转）
概述 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变化的紧耦合是不合适的.在这种情况下,如何将“行为 ...
- Spring中自动装配（转）
Spring中有四种自动装配类型,分别为:byName,byType,constructor,autodetect,下面来分别介绍一下这些是如何自动装配的 <bean id="foo& ...
- java基础知识回顾之抽象类
/* 抽象类: 抽象:笼统,模糊,看不懂!不具体. 特点: 1,方法只有声明没有实现时,该方法就是抽象方法,需要被abstract修饰. 抽象方法必须定义在抽象类中.该类必须也被abstract修饰. ...
- POJ 1279 Art Gallery（半平面交求多边形核的面积）
题目链接 题意 : 求一个多边形的核的面积. 思路 : 半平面交求多边形的核,然后在求面积即可. #include <stdio.h> #include <string.h> ...