robhadfield/index.html

## index.html
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/styles.css">

        <script src="js/lib/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
    <div id="newCarWrap" style="padding:10px;margin: 0 0 20px 0;background:yellow">
    </div>
    <ul id="vehicleList"></ul>

        <script src="js/lib/jquery-min.js"></script>
        <script src="js/lib/underscore-min.js"></script>
        <script src="js/lib/backbone-min.js"></script>

        <script id="vehicleTemplate" type="text/html">
            <p><%= registrationNumber %> <small>(<%= colour %>)</small></p>
        </script>

        <script src="js/main.js"></script>
    </body>
</html>

## main.js
// Model

var Vehicle = Backbone.Model.extend({
    urlRoot: '/api/vehicles',
    idAttribute: 'registrationNumber',

    defaults: {
        colour: 'Red'
    },

    validate: function(attrs){
        if(!attrs.registrationNumber)
            return "I needed that!";
    },

    start: function(attrs){
        return console.log('Vehicle starting');
    }

});


// Collection

var Vehicles = Backbone.Collection.extend({
    model: Vehicle,
    url: '/api/vehicles'
});


// Views

var VehicleView = Backbone.View.extend({
    tagName: 'li',
    className: 'vehicle',

    initialize: function(options){
        this.bus = options.bus;
    },

    render: function(){
        var tmpl = $('#vehicleTemplate').html();
        var template = _.template(tmpl);
        this.$el.html(template(this.model.toJSON()));

        return this;
    },

});

var VehiclesView = Backbone.View.extend({
    initialize: function(options){
        this.bus = options.bus;
        this.bus.on('newCarAdded', this.onNewCarAdded, this);
    },

    onNewCarAdded: function(newCar){
        var vehicleView = new VehicleView({ model: newCar });
        vehicles.add(newCar);
        console.log(vehicles);
        $('#vehicleList').append(vehicleView.render().$el);
    },

    render: function(){
        var self = this;
        this.model.each(function(vehicle){
            var vehicleView = new VehicleView({ model: vehicle, bus: self.bus });
            self.$el.append(vehicleView.render().$el);
        });
    }
});

var NewVehicleView = Backbone.View.extend({

    initialize: function(options){
        this.bus = options.bus;
    },

    events: {
        "click": "onClick",
        "click .addCar": "addCar",
    },

    onClick: function(){
        console.log('Any old click');
    },

    addCar: function(e){
        e.stopPropagation();
        var reg = this.$el.find('input').val();
        if(reg !== '') {
            var newCar = new Vehicle({ registrationNumber : reg });
            this.$el.find('input').val('').focus();
            this.bus.trigger('newCarAdded', newCar);
        } else {
            alert('Please enter a registration number');
        }
    },

    el: '#newCarWrap',

    render: function(){
        this.$el.append('<input type="text" placeholder="Enter reg" /><button class="addCar">ADD PUPIL</button>');
        return this;
    },
});

var vehicles = new Vehicles([
    new Vehicle({ registrationNumber : 'XLI887', colour : 'Blue' }),
    new Vehicle({ registrationNumber : 'ZNP123', colour : 'Blue' }),
    new Vehicle({ registrationNumber : 'XUV456', colour : 'Gray' }),
    new Vehicle({ registrationNumber : 'B853CHE', colour : 'Gold' }),
]);

// Bus (not a vehicle!)

var bus = _.extend({}, Backbone.Events);


// Rendering
var vehiclesView = new VehiclesView({ el: '#vehicleList', model: vehicles, bus: bus});
vehiclesView.render();

var newVehicleView = new NewVehicleView({bus: bus});
newVehicleView.render();

// CONSOLE TESTS

// Check if car is valid
// - car.isValid() = true
//
// Remove registration number
// car.unset('registrationNumber')
//
// Check if bmw is valid
// - car.isValid() = false (no registration to show validation is working)


// console.log('All vehicles', vehicles);

// var blueCars = vehicles.where({colour:'Blue'});
// var XLI887 = vehicles.findWhere({registrationNumber: 'XLI887'});

// console.log('Blue cars: ', blueCars);
// console.log('Car with matched reg: ', XLI887);

// vehicles.remove(XLI887);

// console.log('Collection with matched car removed: ', vehicles);

// vehicles.each(function(vehicle, $i){
    // console.log('Vehicle Number ' + $i, vehicle);
//     $i++;
// });
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/styles.css">

	<script src="js/lib/modernizr-2.6.2.min.js"></script>
	</head>
	<body>
	<div id="newCarWrap" style="padding:10px;margin: 0 0 20px 0;background:yellow">
	</div>
	<ul id="vehicleList"></ul>

	<script src="js/lib/jquery-min.js"></script>
	<script src="js/lib/underscore-min.js"></script>
	<script src="js/lib/backbone-min.js"></script>

	<script id="vehicleTemplate" type="text/html">
	<p><%= registrationNumber %> <small>(<%= colour %>)</small></p>
	</script>

	<script src="js/main.js"></script>
	</body>
	</html>
	// Model

	var Vehicle = Backbone.Model.extend({
	urlRoot: '/api/vehicles',
	idAttribute: 'registrationNumber',

	defaults: {
	colour: 'Red'
	},

	validate: function(attrs){
	if(!attrs.registrationNumber)
	return "I needed that!";
	},

	start: function(attrs){
	return console.log('Vehicle starting');
	}

	});


	// Collection

	var Vehicles = Backbone.Collection.extend({
	model: Vehicle,
	url: '/api/vehicles'
	});


	// Views

	var VehicleView = Backbone.View.extend({
	tagName: 'li',
	className: 'vehicle',

	initialize: function(options){
	this.bus = options.bus;
	},

	render: function(){
	var tmpl = $('#vehicleTemplate').html();
	var template = _.template(tmpl);
	this.$el.html(template(this.model.toJSON()));

	return this;
	},

	});

	var VehiclesView = Backbone.View.extend({
	initialize: function(options){
	this.bus = options.bus;
	this.bus.on('newCarAdded', this.onNewCarAdded, this);
	},

	onNewCarAdded: function(newCar){
	var vehicleView = new VehicleView({ model: newCar });
	vehicles.add(newCar);
	console.log(vehicles);
	$('#vehicleList').append(vehicleView.render().$el);
	},

	render: function(){
	var self = this;
	this.model.each(function(vehicle){
	var vehicleView = new VehicleView({ model: vehicle, bus: self.bus });
	self.$el.append(vehicleView.render().$el);
	});
	}
	});

	var NewVehicleView = Backbone.View.extend({

	initialize: function(options){
	this.bus = options.bus;
	},

	events: {
	"click": "onClick",
	"click .addCar": "addCar",
	},

	onClick: function(){
	console.log('Any old click');
	},

	addCar: function(e){
	e.stopPropagation();
	var reg = this.$el.find('input').val();
	if(reg !== '') {
	var newCar = new Vehicle({ registrationNumber : reg });
	this.$el.find('input').val('').focus();
	this.bus.trigger('newCarAdded', newCar);
	} else {
	alert('Please enter a registration number');
	}
	},

	el: '#newCarWrap',

	render: function(){
	this.$el.append('<input type="text" placeholder="Enter reg" /><button class="addCar">ADD PUPIL</button>');
	return this;
	},
	});

	var vehicles = new Vehicles([
	new Vehicle({ registrationNumber : 'XLI887', colour : 'Blue' }),
	new Vehicle({ registrationNumber : 'ZNP123', colour : 'Blue' }),
	new Vehicle({ registrationNumber : 'XUV456', colour : 'Gray' }),
	new Vehicle({ registrationNumber : 'B853CHE', colour : 'Gold' }),
	]);

	// Bus (not a vehicle!)

	var bus = _.extend({}, Backbone.Events);


	// Rendering
	var vehiclesView = new VehiclesView({ el: '#vehicleList', model: vehicles, bus: bus});
	vehiclesView.render();

	var newVehicleView = new NewVehicleView({bus: bus});
	newVehicleView.render();

	// CONSOLE TESTS

	// Check if car is valid
	// - car.isValid() = true
	//
	// Remove registration number
	// car.unset('registrationNumber')
	//
	// Check if bmw is valid
	// - car.isValid() = false (no registration to show validation is working)


	// console.log('All vehicles', vehicles);

	// var blueCars = vehicles.where({colour:'Blue'});
	// var XLI887 = vehicles.findWhere({registrationNumber: 'XLI887'});

	// console.log('Blue cars: ', blueCars);
	// console.log('Car with matched reg: ', XLI887);

	// vehicles.remove(XLI887);

	// console.log('Collection with matched car removed: ', vehicles);

	// vehicles.each(function(vehicle, $i){
	// console.log('Vehicle Number ' + $i, vehicle);
	// $i++;
	// });