Dans la plupart des applications, un traitement est souvent effectué sur un regroupement de données de même type. Il devient alors logique d’utiliser une structure de données complexe afin d’encapsuler la totalité des données du même type. Appliqué au design pattern MVC, les modèles représentant des entités de même type sont donc logiquement regroupés dans une collection de modèles.
La documentation des collections indique que la création d’une collection est très proche de celle d’un modèle. En effet, il suffit de faire un extend de Backbone.Collection. Il est possible de définir une méthode initialize ainsi que deux attributs spécifiques optionnels: model et comparator. Le premier permet de spécifier la class des models que la collection contiendra ( ou autrement dit, le type des models de la collection). Le deuxième permet de spécifier une méthode de comparaison des éléments de la collection afin que celle-ci soit ordonnée.
1.a) En reprenant vos codes des TP précédents (càd dans le même projet), créez une Collection nommée ModelItems dont l’attribut model doit être fixé à ModelItem. Spécifiez aussi un attribut comparator permettant d’ordonner la collection des items par ordre chronologique inverse des dates de création.
Créez ensuite une collection nommée myItems et ajoutez y, grâce à la méthode add, un item en spécifiant l’attribut createdAt valant 0 et des attributs title et onLoan quelconques. Puis ajoutez-y deux autres items en ne spécifiant cette fois que les attributs title et onLoan. Enfin, faites un console.log du JSON de myItems et vérifiez l’ordre des éléments dans la collection.
1.b) Les collections de Backbone.js joue un rôle proche du design pattern PubSub vu au TP1. En effet, elles écoutent tous les événements change sur les modèles internes afin de faire un trigger du même événement. Ainsi les modèles publient (publish) leur événement change via la collection et il est possible de s’inscrire (subscribe) grâce à la méthode listenTo afin d’écouter tout changement d'attribut sur les modèles de la collections. De plus, des événements add et remove sont lancés par la collection lorsque des modèles sont ajoutés (add) ou retirés (remove) de la collection.
Ajoutez dans votre code un objet qui fera un log de tous les ajouts et changements dans les modèles de la collection myItems. Rajoutez dans votre code un changement du titre d’un item de la collection. Pour ce faire, vous pouvez utilisez la méthode at ou get afin de récupérer un modèle existant dans votre collection. Puis vérifiez les logs de votre console.
1.c) Réalisez la vue nécessaire à l'affichage de la collection d'items. Indications : liez votre vue à une collection plutôt qu'à un model. Au lieu d'écouter uniquement les événements change, écoutez en plus les événements add et remove afin de provoquer le rendu de la vue. La méthode de rendu (render) s'occupera alors de générer le DOM nécessaire.
1.d) Il est parfois utile d’avoir des attributs pour une collection. Par exemple, une collection ModelItemsList pourrait contenir un attributs 'type' pour repésenter le type d'item qu'elle contient (par exemple: une collection de livres, de films, ...). Malheureusement les collections de Backbone.js n’offre pas cette fonctionnalité.
Une solution serait d’encapsuler la collection dans un attribut (nommée par exemple items) d’un Model (nommé ModelItemsList par exemple). Cette solution à l’avantage de faire bénéficier le Model de toutes les fonctionnalités du framework. Par contre, les événements de changement, d’ajout, ... affectant la collection interne ne seront pas propagés par Backbone.js sur le modèle qui la contient. De même, le framework n'est pas capable de faire une sérialisation JSON de modèles ou collections imbriquées l'une dans l'autre. En résumé, l'encapsultaion d'une collection à l'intérieur d'un model n'est pas si intuitif que ça.
La gestion d’une collection interne à un modèle demande un travail additionnel au programmeur. Pour pallier à ce problème, la documentation nous indique qu’une plétore de plugins existent. Avant d'utiliser ceux-ci, essayez de mettre un place un modèle ModelItemsList ayant comme collection interne une collection d'items (modèle ModelItems). Pour vos tests, créez une instance de ce modèle afin de représenter une collection de livre. Enfin, réaliser la vue adéquate et effectuez un affichage de la collection sur votre page.