Tutoriel sur Backbone Partie 3/14

Dans cette vidéo on va apprendre comment ajouté un modal à notre application.

 <!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 ">

		<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"> 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>
					<tr>
						<td>Nom#1</td>
						<td>Prénom#1</td>
						<td>Département#1</td>
						<td><a href="" class="btn btn-success">Modifier</a>
						<a href="" class="btn btn-danger">Supprimer</a></td>
					</tr>

					<tr>
						<td>Nom#2</td>
						<td>Prénom#2</td>
						<td>Département#2</td>
						<td><a href="" class="btn btn-success">Modifier</a>
						<a href="" class="btn btn-danger">Supprimer</a></td>
					</tr>

				</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/javascript">

 var Employe = Backbone.Model.extend({

 	defaults:{

 		nom:'Dupond',
 		prenom:'Jacques',
 		departement:'Informatique'


 	},

 	initialize: function(){

 		this.helloBackbone();
 	},

 	helloBackbone: function(){


 		alert('Hello World');
 	},

 	render : function(){

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


 });

</script>


</html>