Dans ce TP, le framework Backbone.js sera utilisé pour une gestion efficace des événements (events) ainsi qu’une manipulation aisée des modèles (models). L’objectif du TP est d’effectuer une première “prise en main” du framework.
Les modèles du framework Backbone s’occupent de la gestion des données manipulées par l’application. La documentation des models du framework nous indique que pour créer un constructeur pour nos modèles il faut utiliser la méthode extend.
1.a) Créez un Model nommé Item, puis créez deux instances (nommée item1 et item2 par exemple) de ce Model. Ces deux instances doivent avoir un attribut title valant respectivement ‘Item 1’ et ‘Item 2’. Puis faites un console.log de la propriété title des deux instances.
1.b) Identique au point a) mais votre Model doit spécifier une valeur par défaut pour un nouvel attribut nommé createdAt. La valeur par défaut devra être le timestamp unix en microseconde (indication: utilisé l’objet Date en JS pour obtenir le timestamp actuel ou $.now() en jquery). Créez vos deux instances à environ une microseconde d’intervalle en ne spécifiant que leur titre, puis faites un console.log de vos instances encodées en JSON pour vérification (JSON.stringify).
Pour attendre un changement d'une microseconde à l'autre, vous pouvez utilisez le code de test suivant:
var now = jQuery.now();
while (now === jQuery.now());
Ce code n'a bien sûr de sens que pour aider à la compréhension du mécanisme des valeurs par défaut de Backbone et ne doit pas être utilisé dans des codes d'applications Web classiques.
1.c) Backbone.js offre la possibilité d’utiliser une méthode pour la validation des données des Models, ainsi que des méthodes pour leur initialisation et construction. En reprenant votre code du point précédent, ajoutez une méthode validate qui contrôle qu’un attribut onLoan est bien définit et est un booléen. Vérifiez aussi que le titre est définit et est bien une string.
Ajoutez aussi une méthode initialize faisant un simple console.log de ces deux paramètres (qui sont les attributs et les options spécifiés lors de la construction de l’instance).
Testez votre “validateur” avec deux instances, l’une sans spécifier de titre mais avec onLoan valide, puis l’autre avec un titre mais onLoan valant 1. Vous devez passez l’option {validate: true} lors de la construction des instances pour que Backbone valide vos paramètres (en appelant votre méthode validate). Faites ensuite un console.log de vos deux instances en JSON ainsi que de leur attribut validationError. Observez aussi le console.log de votre méthode initialize.
Indication: pour vérifier si un attribut existe (ou tester son type), vous pouvez utiliser les méthodes is du framework underscore
1.d) Une fois une instance d’un Model créée, il est conseillé de passer par les méthodes set et get pour modifier les attributs des instances (principe de l'encapsulation). Ainsi, Backbone.js peut gérer efficacement ces changements. Créer une troisième instance avec un titre ‘item 3’ et onLoan à true, puis changer son attribut title pour ‘item 3 - changed’. Faites un console.log du JSON de cette nouvelle instance ainsi que du résultat de la méthode previousAttributes.
Remarque: si vous voulez qu’un set d’un attribut passe par votre “validateur”, vous devez spécifier l’option {validate: true}, comme lors de la construction de l’instance.
Nous avons déjà vu dans le cours de base l’utilité d’une bonne gestion des events. Le framework Backbone.js va nous aider à gérer les événements de manière simple, en produire automatiquement quelques-uns, et nous fournir des outils pour transmettre et recevoir des informations additionnelles.
La documentation des events du framework nous indique que pour pouvoir bénéficier du système de gestion des events il faut “étendre” (extend) ou “cloner” (clone) l’objet Backbone.Events. Les Models de Backbone.js bénéficie déjà de ce traitement.
2.a) Créez une nouveau Model nommé Person avec une méthode nommée ‘log’ dont le code est un simple console.log du model (c.à.d. du this) en JSON. Faite que les instances de ce Model écoutent les événements my:log grâce à la méthode on de Backbone.js (remarque: bien que proche elle n’est pas identique à la méthode on de jQuery) et exécute la méthode ‘log’ si l’événement se produit. Réfléchissez bien à où mettre ce code. Enfin, créez deux instances de Person avec un attribut name pour chacune, et lancez (trigger) l’event ‘my:log’ sur les deux objets et observez le résultat dans la console.
2.b) Backbone.js génère quelques events de manière automatique. Reprenez le code du point 2.a et rajoutez la gestion de l’événement ‘change’ dans votre Model. Faites que cet événement appel une méthode logChange dont le code sera un console.log affichant les valeurs des attributs de l’objet avant et après le changement. Pour tester votre code, il vous suffit de changer le nom d’une des deux instances créées au point précédant grâce à la méthode set.
2.c) Comme vous l’avez constaté, les événements ne sont pas “globaux”, le trigger doit se produire sur l’objet en question. Il peut être intéressant d’implémenter un mécanisme plus malléable en s’inspirant par exemple du design pattern Pub Sub. Essayez d’implémenter ce design pattern avec Backbone.js pour les models du point précédent. La méthode listenTo vous sera peut être utile.
Remarque finale: Bien que ces exercices mettent en oeuvre la gestion des événements dans les Models, c’est uniquement pour ne pas complexifier ce TP. Nous verrons que les events seront plutôt à gérer dans les Views de Backbone.js