Tutoriel sur Backbone Partie 2/14

Pour cette seconde vidéo tutoriel Backbone nous allons voir les Models.

 

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

  <title> Tableau des employés</title>
</head>
	

<body>

	<section class="col-md-12" id="vue_principale">

		<h1 class="text-center"> Les employés</h1>

		<div class="col-md-6 col-md-offset-3 text-center" style="margin-top:30px">

			<h2 class="text-left"> Formulaire d'ajout</h2>

			<form class="form-inline"  style="margin-top:30px">

				<div class="form-group">
					<label>Nom</label>
					<input class="form-control" id="nom" placeolder="nom">
				</div>

				<div class="form-group">
					<label>Prénom</label>
					<input class="form-control" id="prenom" placeolder="prénom">
				</div>

				<div class="form-group">
					<label>Département</label>
					<input class="form-control" id="departement" placeolder="département">
				</div>

				<button class="btn btn-default add_employe"> Ajouter</button>
			</form>

		</div>

		<div class="col-md-6 col-md-offset-3"  style="margin-top:30px">

			<h2 class="text-left"> Liste des employés</h2>

			<table class="table table-striped"  style="margin-top:30px">

				<thead>
					<tr>
						<th>Nom</th>
						<th>Prénom</th>
						<th>Département</th>
						<th>Action</th>
					</tr>
				</thead>

				<tbody id="employee_list">
					

				</tbody>

			</table>


		</div>


	</section>

	<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
	<script src="underscore-min.js" type="text/javascript"></script>
	<script src="backbone-min.js" type="text/javascript"></script>
	<script src="BackbonelocalStorage/backbone.localStorage-min.js" type="text/javascript"></script>

</body>	

<script type="text/template" id="affichage_donnee">

	<td> <%- nom %> </td>
	<td> <%- prenom %> </td>
	<td> <%- departement %> </td>
	<td><a href="" class="btn btn-success">Modifier</a>
	<a href="" class="btn btn-danger delete_employee">Supprimer</a></td>

</script>


<script type="text/javascript">

EmployeeView = Backbone.View.extend({

	tagName : 'tr',
	template : _.template($("#affichage_donnee").html()),

    
    events:{

    	'click .delete_employee': 'deleteEmploye'
    },

	render: function(){

		this.$el.html(this.template(this.model.toJSON()));

		return this;

	},

	deleteEmploye: function(){

		this.model.destroy();
	}


});

PrincipalView = Backbone.View.extend({

	el:'#vue_principale',

	initialize: function() {
		
		employeeList.on('add',this.displayEmployee,this);
		employeeList.fetch();
	},

	events:{

		'click .add_employe' : 'create_employe',
	},

	create_employe: function () {
		
		
		employeeList.create({nom:$("#nom").val(),prenom:$("#prenom").val(),departement:$("#departement").val()});
	},

	displayEmployee: function (employe) {

		view = new EmployeeView({model:employe});
		$('#employee_list').append(view.render().el)
	}
});	

var Employe = Backbone.Model.extend({

 	defaults:{

 		nom:'',
 		prenom:'',
 		departement:''

 		
 	},

	
 	localStorage : new Store("EmployeDB"),

 	initialize: function(){

 		this.on('invalid',this.renderOnSave,this),
 		//this.on('change',this.renderOnSet,this);
  		this.helloBackbone();
 	},


 	validate: function(attributs,error){

 		var error='';

 		if (!attributs.nom){
 			error='Nom \n';
 		}

 		if (!attributs.prenom){
 			error=error+'Prenom \n';
 		}

 		if (!attributs.departement){
 			error=error+'Departement \n';
 		}

 		if (error){

 			return 'Voici la liste des erreurs : \n'+ error;
 		}
 	},

 	helloBackbone: function(){

 		//alert('Hello World');
 	},

 	render : function(){

 		alert('Bonjour Mr : '+this.get('nom'));
 	},

 	renderOnSet : function(){

 		if(!this.isValid()){
 			alert('Erreur de validation \n'+this.validationError);
 		}
 		
 	},

 	renderOnSave : function(){

 		alert('Il y a une erreur dans le formulaire \n'+this.validationError);
 	}

 });

  Employees = Backbone.Collection.extend({

  	model : Employe,
  	localStorage : new Store("EmployeDB"),

  })

  var employeeList = new Employees;
  var vuePrinciaple = new PrincipalView;

</script>


</html>