Backone.js
Dans cet article, je vais vous présenter la librairie Backbone.js. L’API est disponible sur le site :
http://backbonejs.org/
Backbone permet de mettre en place une architecture MVC en javascript, côté client. Cela va permettre d’avoir un code javascript mieux structuré.
Model
Un modèle est une représentation de vos données sous forme d’objet. Pour créer un modèle backbone, il est nécessaire d’étendre la class : Backbone.Model.extend() ;
La déclaration d’un model « Personne » :
- var html5webapp = {};
- html5webapp.Personne = Backbone.Model.extend({
- defaults: {
- "Id" :"1",
- "Nom" : "Toto",
- "Prenom" : "Tata"
- },
- initialize : function Personne() {
- this.bind("error", function(model, error){
- console.log( error );
- });
- }});
L’attribut defaults permet de mettre des valeurs par défaut aux propriétés de notre modèle.
Grâce à la console de développement Google Chrome, nous pouvons déclarer une variable pers comme ceci :
Pour obtenir maintenant la valeur des propriétés :
Il est aussi possible d’ajouter des méthodes à notre modèle, comme par exemple des accesseurs à nos propriétés :
- getId : function() {
- return this.get('Id');
- },
- setId : function(value) {
- this.set({ Id : value });
- },
- getNom : function() {
- return this.get('Nom');
- },
- setNom : function(value) {
- this.set({ Nom : value });
- },
- getPrenom : function() {
- return this.get('Prenom');
- },
- setPrenom: function(value) {
- this.set({Prenom : value });
- }
Utilisation des accesseurs set /get :
Afficher un modèle
Pour afficher un modèle, on utilise ici la librairie Underscore.js comme ceci :
- < script type="text/template" id="personne-template">
- < ul data-role="listview" id="personne-field" data-inset="true">
- < li >Id: <%= Id %>< /li>
- < li >Nom: <%= Nom %>
- < li >Prenom: <%= Prenom %></ li>
- < /ul>
- < /script>
La déclaration du template « Underscore » est à faire dans une balise script. Puis on y ajoute les propriétés du modèle à afficher.
View
Afin de faire l’interface entre notre modèle et de notre template, on déclare une View. Dans cette view, on lui spécifie la template à utiliser via cette instruction :
this.template = _.template($('#personne-template').html());
- html5webapp.PersonneView = Backbone.View.extend({
- initialize: function(){
- this.template =
- _.template($('#personne-template').html());
- },
- render: function() {
- var container = this.options.viewContainer,
- personneModel = this.model,
- renderedContent = this.template(personneModel.toJSON());
- container.html(renderedContent);
- container.trigger('create');
- return this;
- }
- });
Puis lorsque la page HTML est prête, nous allons déclarer un conteneur dans lequel on souhaite afficher le modèle. Et enfin instancie la View en lui passant le conteneur et le modèle.
- $(document).ready(function() {
- var personneContainer = $('#Personne').find(":jqmData(role='content')"),
- perosnneView;
- var persModel = new html5webapp.Personne();
- personneView = new html5webapp.PersonneView({model : persModel,
- viewContainer: personneContainer});
- personneView.render();
- });
La fonction render() va réaliser l’interprétation du template et du modèle.
Affichage du modèle avec les propriétés par défaut.
.JPG)
.JPG)
