thibault/app.js

## app.js
(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);

## index.html
<!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>

## test.js
var router = new Router();
Backbone.history.start({ pushState: true });
	(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 });