<!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;
});