Qu'est-ce qu'un modèle
L'auteur de Backbone définit le modèle comme suit:
Le modèle est au cœur de toute application Web, il contient des données interactives et la majeure partie de la logique. Par exemple: la conversion, la vérification, les attributs et les autorisations d'accès, etc.
Alors, créons d'abord un modèle:
Person = Backbone.Model.Extend ({Initialize: function () {alert ("Welcome to Backbone!");}}); Var personne = new personne;Dans le code ci-dessus, nous définissons un modèle nommé personne, et après instanciation, nous obtenons une personne. Chaque fois que vous instanciez un modèle, la méthode Initialize () sera automatiquement déclenchée (ce principe s'applique également à la collecte, à la vue). Bien sûr, la méthode Initialize () n'est pas obligatoire lors de la définition d'un modèle, mais lorsque vous utilisez Backbone, vous le trouverez indispensable.
Définir les propriétés du modèle
Maintenant, nous voulons transmettre certains paramètres lors de la création d'une instance de modèle pour définir les propriétés du modèle:
Person = Backbone.Model.Extend ({Initialize: function () {alert ("Welcome to Backbone!");}}); // Set var Person = new Person ({Name: "Stephenlee", l'âge: 22}); // nous pouvons également définir Var Person = New Person () après que le modèle soit instancié par la méthode Set (). var personne = new personne (); Person.set ({name: "Stephenlee", âge: 22});Obtenir des propriétés du modèle
En utilisant la méthode GET () du modèle, nous pouvons obtenir les propriétés:
Person = Backbone.Model.Extend ({Initialize: function () {alert ("Welcome to Backbone!");}}); Var Person = new Person ({Name: "Stephenlee", âge: 22}); var âge = person.get ("Age"); // 22var name = personne.get ("name"); // "Stephenlee"Définir les propriétés par défaut du modèle
Parfois, vous voulez que le modèle inclue certaines valeurs de propriété par défaut lors de l'instanciation, ce qui peut être réalisé en définissant la propriété par défaut du modèle:
Person = Backbone.Model.Extend ({par défaut: {name: "LeBronjames", Âge: 30,}, initialize: function () {alert ("Welcome to Backbone!");}}); Var person = new Person ({name: "Stephenlee"}); var gel = personne.get ("Age"); // Parce que la valeur d'âge n'est pas spécifiée lors de l'instanciation, la valeur par défaut est 30var name = personne.get ("name"); // Si l'instanciation a défini la valeur du nom, c'est "Stephenlee"Utiliser les propriétés du modèle
Vous pouvez personnaliser des méthodes dans le modèle pour utiliser les propriétés du modèle. (Toutes les méthodes personnalisées par défaut au public)
Person = Backbone.Model.Extend ({par défaut: {Name: "LeBronjames", Âge: 30, Hobby: "Basketball"}, Initialize: function () {alert ("Bienvenue sur Backbone!");}, Like: Function (HobbyName) {this.set ({hobby: hobbyname});},}); var person = new: hobbyname});},}); "Stephenlee", âge: 22}); Person.like ("Coding"); // Définit le passe-temps de Stephenlee à CodingVar Hobby = Person.get ("Hobby"); // "codage"Écoutez le changement des propriétés du modèle
Selon le mécanisme de la colonne vertébrale, nous pouvons écouter tout attribut du modèle. Ensuite, nous essayons de lier l'attribut d'un modèle dans la méthode initialize () pour l'écouter, en prenant le nom d'attribut à titre d'exemple:
Person = Backbone.Model.Extend ({par défaut: {Name: "LeBronjames", Âge: 30,}, Initialize: function () {alert ("Bienvenue à Backbone!"); This.on ("Change: Name", fonction (modèle) {var name = Model.get ("Name"); // 'kobebryant' alert ("" a changé mon nom pour "+;}); }}); var personne = new personne (); var age = personne.set ({nom: "kobebryant"});Grâce au code ci-dessus, nous savons écouter une certaine propriété du modèle. En supposant que nous devons écouter sur toutes les propriétés du modèle, utilisez 'this.on ("change", fonction (modèle) {}); .
Interaction des données entre le serveur et le modèle
Comme mentionné précédemment, le modèle contient des données interactives, de sorte que l'une de ses fonctions consiste à transporter des données transmises à partir du serveur et à interagir avec le serveur. Supposons maintenant qu'il existe un utilisateur de table de MySQL sur le serveur, qui a trois champs ID, nom et e-mail. Le côté serveur utilise le style de repos pour communiquer avec le frontal et utilise l'URL: / utilisateur pour interagir. Notre modèle est défini comme:
var userModel = Backbone.Model.Extend ({urlroot: '/ user', par défaut: {name: '', e-mail: ''}});Créer un modèle
Chaque modèle de squelette a un ID de propriété, ce qui correspond aux données côté serveur une par une. Si nous voulons ajouter un nouvel enregistrement à l'utilisateur de la table MySQL côté serveur, nous avons juste besoin d'instancier un modèle et d'appeler la méthode Save (). À l'heure actuelle, l'ID d'attribut de l'instance du modèle est vide, ce qui signifie que le modèle est nouvellement créé, donc Backbone enverra une demande postale à l'URL spécifiée.
var userModel = dackbone.model.extend ({urlroot: '/ user', par défaut: {name: '', e-mail: ''}}); var user = new UserModel (); // notez que nous ne définissons pas l'attribut d'id ici Le modèle n'a pas d'attribut ID, utilisez la méthode Save () pour le moment. L'éclairage enverra une demande de poste au côté du serveur. Après avoir reçu les données, le côté serveur les stocke et renvoie les informations contenant l'ID à ModeLuser.Save (UserDetails, {Success: Function (User) {alert (user.tojson ());}})À l'heure actuelle, il y a un enregistrement supplémentaire dans la table d'utilisateurs de MySQL sur le serveur avec le nom Stephenlee et Email [email protected].
Obtenez un modèle
Nous venons de créer un modèle et l'avons stocké dans la base de données côté serveur. En supposant que lors de la création du modèle, la valeur d'attribut ID renvoyé par le côté serveur est 1. À l'heure actuelle, nous pouvons récupérer les données stockées via la valeur de l'ID. Lorsque nous initialisons une instance de modèle avec la valeur d'attribut ID, via l'opération fetch (), Backbone enverra une demande GET à l'URL spécifiée.
var user = new UserModel ({id: 1}); // spécifiez la valeur de l'ID pendant l'initialisation // Utilisez la méthode fetch () pour demander des données à partir de l'utilisateur / 1, et le côté serveur renvoie l'enregistrement utilisateur complet, y compris le nom, le courriel et autres informations user.fetch (})Mettre à jour un modèle
Si nous devons modifier l'enregistrement utilisateur stocké, utilisez la valeur ID connue et utilisez la méthode Save (), mais comme l'ID n'est pas vide pour le moment, Backbone enverra une demande de vente à l'URL spécifiée.
var user = new UserModel ({id: 1, nom: 'Stephenlee', e-mail: '[email protected]'}); // spécifie la valeur d'ID lors de l'instanciation // Parce que la valeur d'ID est spécifiée, utilisez la méthode Save () à ce moment. Backbone enverra une demande de vente à User / 1 et modifiera l'e-mail de l'enregistrement avec l'ID 1 dans la base de données user.save ({email: '[email protected]'}, {Success: function (modèle) {alert (user.tojson ());}});Supprimer un modèle
Si nous devons supprimer des enregistrements dans la base de données, utilisez la valeur d'ID connue et utilisez la méthode de destruction (). À ce stade, Backbone enverra une opération de suppression à l'URL spécifiée.
var user = new UserModel ({id: 1, nom: 'Stephenlee', e-mail: '[email protected]'}); // Spécifiez la valeur d'ID lors de l'instanciation // Parce que la valeur ID est spécifiée, utilisez la méthode Destren () à ce moment, Backbone enverra une demande de suppression à l'utilisateur / 1. Après avoir reçu la demande, les données avec l'ID 1 seront supprimées dans la base de données user.destroy ({Success: function () {alert ('détruite');}});Qu'est-ce que la collection
En bref, la collection à l'épine dorsale est une collection ordonnée de modèles, par exemple, il peut être utilisé dans les situations suivantes:
Modèle: Élève, collection: ClassStudentsModel: Todo Item, Collection: Todo ListModel: Animal, Collection: Zoo
La collection n'utilise généralement que le même type de modèle, mais le modèle peut appartenir à différents types de collecte, tels que:
Modèle: Élève, collection: Gym ClassModel: Étudiant, Collection: Art ClassModel: Élève, collection: Classe d'anglais
Créer une collection
// définir le modèle Songvar Song = Backbone.Model.Extend ({par défaut: {nom: "Non spécifié", artiste: "Non spécifié"}, initialize: function () {console.log ("Music Is the Answer");}}); // Définir la collection albumvar album = backbone.collection); Song1 = New Song ({Name: "How Bizarre", artiste: "OMC"}); var Song1 = New Song ({Name: "How Bizarre", artiste: "OMC"}); var Song2 = New Song ({Name: "Sexual Healing", artiste: "Marvin Gaye"}); Var Song3 = New Song ({{Name " myalbum = nouvel album ([Song1, Song2, Song3]); console.log (myalbum.models); // La sortie est [Song1, Song2, Song3]