Bascules de cure

Cet article explore Backbone.js, un cadre JavaScript utilisant une architecture MV * pour la création d'applications. Il se concentre sur la gestion des événements, un aspect crucial de la séparation des préoccupations entre les vues et les modèles.

Concepts clés:

• MV * Architecture: Backbone.js utilise une architecture de modèle-View- *, des données de séparation (modèles), une présentation (vues) et une logique d'application (souvent gérée implicitement dans les vues ou via des contrôleurs personnalisés) .
• Gestion des événements: Le cœur de cet article est la façon dont Backbone.js gère les événements pour faciliter la communication entre les vues et les modèles. Les modifications dans les modèles déclenchent des événements, auxquels les vues écoutent et répondent (par exemple, la rediffusion).
• Afficher les responsabilités: Les vues rendent l'interface utilisateur, affichent des données à partir des modèles et gérent la saisie de l'utilisateur en déclenchant des événements.
• Responsabilités du modèle: Les modèles gèrent les données d'application, mettent à jour les données basées sur les événements déclenchés à partir des vues et interagissent potentiellement avec une base de données.

Le tutoriel s'appuie sur une leçon précédente, introduisant une logique de type contrôleur pour gérer les interactions utilisateur. Il souligne l'importance de séparer les préoccupations: les vues gèrent la présentation et la saisie des utilisateurs, tandis que les modèles gèrent la logique des données.

Techniques de gestion des événements:

L'article détaille deux méthodes principales pour gérer les événements dans Backbone.js:

1. events Hash: Cette approche définit directement les gestionnaires d'événements dans la vue à l'aide d'une carte de valeur clé. La clé spécifie l'événement et l'élément cible (par exemple, 'click .add-one': 'addOne'), et la valeur est la fonction à exécuter.

2. listenTo Méthode: Cette méthode permet à un objet (généralement une vue) d'écouter des événements sur un autre objet (généralement un modèle). Il est particulièrement utile pour gérer les auditeurs d'événements et s'assurer qu'ils sont correctement nettoyés. L'exemple utilise this.listenTo(this.model, "change", this.render); pour renvoyer la vue chaque fois que le modèle change.

Le tutoriel fournit un exemple pratique de l'ajout et de la soustraction des stocks d'une application d'inventaire de planche de surf. Il montre comment:

1. Ajouter des boutons au modèle de la vue pour déclencher des événements.
2. Définir les gestionnaires d'événements dans la vue (addOne, minusOne) qui mettent à jour le modèle.
3. Implémentez les fonctions du modèle (addOne, minusOne) pour modifier les données et déclencher l'événement "change".
4. Utilisez la fonction initialize dans la vue pour écouter l'événement "change" du modèle et réintégrer la vue.

L'article se termine par une démo de codepen et une section FAQ abordant les questions courantes sur les événements de l'épine dorsale.js, notamment en utilisant on, off, once, stopListening, et la gestion des événements sur des attributs de modèle ou des collections spécifiques . Un appel à l'action favorise un cours de prime sitepoint sur Backbone.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!