Skip to content

Instantly share code, notes, and snippets.

@thibault
Last active August 29, 2015 13:57
Show Gist options
  • Save thibault/9779462 to your computer and use it in GitHub Desktop.
Save thibault/9779462 to your computer and use it in GitHub Desktop.
(function(exports) {
var Models = {};
exports.Models = Models;
Models.Hotel = Backbone.Model.extend({
defaults: {
name: 'default name',
price: 10
},
isCheap: function() {
return this.get('price') <= 10;
}
});
var Collections = {};
exports.Collections = Collections;
Collections.HotelCollection = Backbone.Collection.extend({
model: Models.Hotel,
getCheapHotels: function() {
return this.filter(function(hotel) {
return hotel.isCheap();
});
},
getHotelNames: function() {
return this.pluck('name');
}
});
var Views = {};
exports.Views = Views;
Views.HotelView = Backbone.View.extend({
el: '#hotel',
template: _.template($('#hotel-tpl').html()),
render: function() {
var data = this.model.attributes;
var html = this.template(data);
this.$el.html(html);
return this;
}
});
Views.HotelListView = Backbone.View.extend({
el: '#hotel-list',
events: {
'click a': 'onClick',
},
template: _.template($('#hotel-list-tpl').html()),
initialize: function() {
this.listenTo(this.collection, 'change', this.render);
this.listenTo(this.collection, 'add', this.render);
this.listenTo(this.collection, 'remove', this.render);
},
render: function() {
var data = this.collection.toJSON();
var html = this.template({ hotels: data });
this.$el.html(html);
return this;
},
onClick: function(event) {
event.preventDefault();
var target = event.target.pathname;
Backbone.history.navigate(target, { trigger: true });
}
});
exports.Router = Backbone.Router.extend({
routes: {
'': 'home',
'hotels/:id': 'detailHotel'
},
initialize: function() {
this.collection = new Collections.HotelCollection();
this.collection.add([
{
id: 1,
name: 'Heartbreak Hotel',
description: 'My favourite hotel',
price: 50
},
{
id: 2,
description: 'An ugly hotel',
price: 5
},
{
id: 3,
name: 'Another luxury hotel',
description: 'Very expensive hotel',
price: 500
}
])
},
home: function() {
var listView = new Views.HotelListView({
collection: this.collection
});
listView.render();
},
detailHotel: function(id) {
var hotel = this.collection.get(id);
var view = new Views.HotelView({ model: hotel });
view.render();
}
});
})(this);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ma super appli backbone</title>
</head>
<body>
<ul id="hotel-list"></ul>
<div id="hotel"></div>
<script type="text/template" id="hotel-tpl">
<h1><%= name %></h1>
<p><%= description %></p>
</script>
<script type="text/template" id="hotel-list-tpl">
<% _.each(hotels, function(hotel) { %>
<li><a href="/hotels/<%= hotel.id %>"><%= hotel.name %></a></li>
<% }); %>
</script>
<script src="js/libs/jquery-2.1.0.js"></script>
<script src="js/libs/underscore.js"></script>
<script src="js/libs/backbone.js"></script>
<script src="js/app.js"></script>
<script src="js/test.js"></script>
</body>
</html>
var router = new Router();
Backbone.history.start({ pushState: true });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment