Modèle
En ce qui concerne la colonne vertébrale, la chose la plus élémentaire est le modèle. Cette chose est comme le modèle de cartographie de la base de données dans le développement back-end. Il s'agit également d'un modèle d'objets de données, et il devrait avoir les mêmes attributs que le modèle dans le back-end (seuls les attributs qui doivent être utilisés via le front-end).
Jetons un coup d'œil à ce que vient le modèle d'épine dorsale de l'exemple étape par étape.
Définissez d'abord une page HTML:
<! Doctype html> <html> <éad- head> <itle> the5fire-backbone-model </title> </ajax.gody> </ body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </ script> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </ script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </ script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </ script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </ script> <script> (function ($) {/ ** * Put Code ici ** /}) (jQuery); </ script> </html>Le code suivant doit être rempli dans la fonction dans la balise de script de ce HTML.
1. L'objet le plus simple
Man = dackbone.model.extend ({initialize: function () {alert ('hey, vous me créez!');}}); Var man = new man;C'est très simple. Il y a aussi une présentation de modèle dans Helloworld, sans définir des attributs. Il s'agit d'une méthode pendant l'initialisation ou d'un constructeur.
2. Deux méthodes d'attribution d'objets
Le premier consiste à définir directement et à définir la valeur par défaut.
Man = dackbone.model.extend ({initialize: function () {alert ('hey, vous me créez!Le deuxième type est défini lors de l'attribution
Man = dackbone.model.extend ({initialize: function () {alert ('hey, vous me créez!');}}); Man.set ({name: 'the5fire', age: '10 '}); alert (man.get (' name '));Lorsque vous utilisez des valeurs Get, Get est utilisé.
3. Méthodes dans l'objet
Man = dackbone.model.extend ({initialize: function () {alert ('hey, vous me créez!');}, Par défaut: {name: 'zhang san', Âge: '38'}, à propos: function () {return 'my name est' + this.get ('name') + ', cette année' + this.get ('`` Âge') + 'an';}); Homme; alerte (man.aboutme ());4. Écoutez les changements dans les attributs de l'objet
Man = dackbone.model.extend ({initialize: function () {alert ('hey, vous me créez!'); // lier l'écoute pendant l'initialisation this.bind ("change: nom", function () {var name = this.get ("name"); alert ("vous avez changé le nom attribut à:" + name);});},; }, à propos de la fonction () {return 'mon nom est' + this.get ('name') + ', cette année' + this.get ('age') + 'année';}}); var man = new man; man.set ({name: 'the5fire'}) // déclenche l'événement de changement lié, alerte.5. Ajouter des règles de vérification aux invites d'objet et d'erreur
Man = dackbone.model.extend ({initialize: function () {alert ('hey, vous me crée! });}, par défaut: {name: 'Zhang san', Âge: '38'}, valider: function (name ne peut pas être vide! "; }}); var man = new man; man.set ({name: ''}); // Selon les règles de vérification, un message d'erreur apparaît.6. L'acquisition et le stockage des objets nécessitent la prise en charge du côté serveur.
Tout d'abord, vous devez définir un attribut URL pour l'objet. Lors de l'appel de la méthode de sauvegarde, tous les attributs de l'objet seront publiés sur le serveur.
Man = dackbone.model.extend ({url: '/ sauver /', initialize: function () {alert ('hey, vous me créez!'); // lier l'écoute pendant l'initialisation this.bind ("change: name", function () {var name = this.get ("name"); alert ("vous avez changé l'attribut de nom à:" + name);}); this.bind ("erreur", fonction (modèle, erreur) {alert (erreur);});}, par défaut: {name: 'zhang san', Âge: '38'}, valide: function (attributes) {if (attributes.name == '') {return "ne peut pas être vide!"; ', Cette année' + this.get ('age') + 'an'; // Le message sera envoyé à l'URL correspondant au modèle, et le format de données est JSON {"Name": "The5fire", "Age": 38} // puis obtenir les données du côté serveur en utilisant la méthode Fetch ([Options]) var Man1 = New Man; // Dans le premier cas, si la méthode Fetch est utilisée directement, il enverra une demande de demande à l'url de votre modèle, Obtenez ou publiez du côté du serveur. man1.fetch (); // Dans le deuxième cas, ajoutez des paramètres à récupérer, comme suit: man1.fetch ({url: '/ getmans /'}); // De cette façon, une demande GET sera envoyée à l'URL / GetMans /. // Le style de résultat renvoyé par le serveur doit être les données de format JSON correspondantes, identiques au format de poste lors de l'enregistrement. // Cependant, la méthode d'acceptation des données renvoyées par le serveur est la suivante: man1.fetch ({url: '/ getmans /', succès: fonction (modèle, réponse) {alert ('succès'); // le modèle est l'alerte de données récupérée (Model.get ('name'));}, l'erreur: la méthode (// lorsque le format de retour est incorrect ou non-jonne alert ('error');}});Remarque: Les codes ci-dessus ne sont que des codes qui peuvent être exécutés normalement, mais il y aura des cas sur le côté serveur plus tard.
Il convient d'ajouter ici que le fonctionnement asynchrone du serveur est terminé via la méthode Backbone.Sync. Lors de l'appel de cette méthode, un paramètre sera automatiquement adopté et la demande correspondante sera envoyée au serveur en fonction des paramètres. Par exemple, si vous enregistrez et l'épine dorsale déterminera si votre objet est nouveau. S'il est nouvellement créé, le paramètre est créé. S'il s'agit d'un objet existant, il n'a été modifié que, le paramètre est mis à jour. Si vous appelez la méthode Fetch, le paramètre est lu. S'il est Destory, le paramètre est supprimé. Autrement dit, le soi-disant crud ("créer", "lecture", "mise à jour" ou "supprimer"), et les types de demande correspondant à ces quatre paramètres sont publiés, get, put et supprimer. Vous pouvez effectuer des opérations CRUD correspondantes sur le serveur en fonction de ce type de demande.
Note:
En ce qui concerne l'URL et l'URLROOT, si vous définissez URL, votre crud enverra la demande correspondante à cette URL. Cependant, un autre problème est que la demande de suppression est envoyée, mais aucune donnée n'est envoyée. Ensuite, vous ne savez pas quel objet (enregistrement) doit être supprimé du côté du serveur. Voici donc un autre concept d'Urlroot. Après avoir défini URLROOT, lorsque vous envoyez des demandes de put et de suppression, l'adresse URL de la demande est: /baseurl/βModel.id], afin que vous puissiez mettre à jour ou supprimer l'objet correspondant (enregistrement) en extrait les valeurs après l'URL du côté serveur.
Collection
La collection est une collection ordonnée d'objets modèles. Il est très simple de comprendre le concept. Si vous le regardez à travers quelques exemples, vous le trouverez plus simple.
1. Exemples sur les livres et la bibliothèque
Book = dackbone.model.extend ({par défaut: {// Merci aux internautes pour avoir modifié la correction de l'alimentation bleue en defaultStitle: 'Default'}, initialize: function () {// alert ('hey, vous me créez!');}}); Bookshelf = backbone.collection.Extend ({modèle: book}); 'book1'}); var book2 = new book ({title: 'book2'}); var book3 = new book ({title: 'book3'}); // var biberboft = new libshelf ([book1, book2, book3]); // Notez qu'il s'agit d'un tableau, ou utilisez Addvar Bixhelf = New Bixhelf; Bookshelf.Add (Book1); Bookshelf.Add (Book2); Bookshelf.Add (Book3); LiberShelf.Remove (Book3); // basé sur la bibliothèque de sous-oreaux JS, vous pouvez également utiliser chaque méthode pour obtenir les données de la collection dans la collection de la collection dans la collection dans la collection dans la collection Bookshelf.each (function (book) {alert (book.get ('title'));});Très simple, pas d'explication
2. Utilisez Fetch pour obtenir des données du côté serveur
Tout d'abord, vous devez définir l'URL dans la bibliothèque ci-dessus. Notez que la propriété Urlroot n'existe pas dans la collection. Ou vous définissez directement la valeur de l'URL dans la méthode de fetch, comme suit:
Bookshelf.fetch ({url: '/ getBooks /', Success: function (collection, réponse) {collection.each (function (book) {alert (book.get ('title'));});}, error: function () {alert ('error');}});Il existe également deux méthodes qui acceptent les valeurs de retour. Je pense qu'il est facile de comprendre le sens spécifique. Si vous retournez des données dans le format correct, vous appellerez la méthode de réussite et la méthode d'erreur sera appelée. Bien sûr, la méthode d'erreur dépend également de l'ajout des mêmes paramètres formels que la méthode de réussite.
Le format Renvoie la bibliothèque correspondant est le suivant: [{'title': 'book1'}, {'title': 'book2'} .....]
3. Réinitialiser la méthode
Lorsque cette méthode est utilisée, elle doit être coordonnée avec la récupération ci-dessus. Une fois que la collection a récupéré les données, la méthode de réinitialisation sera appelée, vous devez donc définir la méthode de réinitialisation ou lier la méthode de réinitialisation dans la collection. Voici une démonstration de l'utilisation de liaisons:
Bookshelf.bind ('reset', showallbooks); showallbooks = function () {libshelf.each (function (book) {// rendez les données du livre à la page.});}Les étapes de liaison doivent être effectuées avant de récupérer.
Le code complet sur la collection est donné ci-dessous, ce qui nécessite une prise en charge côté serveur. La construction côté serveur sera écrite plus tard.
<! Doctype html> <html> <éad- head> <tlecther> the5fire-backbone-collection </tapt> </a-head> <body> </ body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </ script> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </ script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </ script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </ script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </ script> <script> (fonction ($) {// collection est une collection commandée de modèles simples // 1. Correction des défauts de défaut: 'par défaut'}, Initialise: Function () {// alerte (Hey, vous créez! ');}}); 'Book3'}); I <Bibeaux Reset pour rendre la librisée.bind (réinitialisation ', showallbooks); libotements.each (function (livre) {// Rendez les données du livre à la page.});} // Les codes ci-dessus sont uniquement le code qui peut être exécuté normalement, mais l'instance côté serveur sera ultérieure.