La collection de Backbone.js est juste un modèle de jeu ordonné simple. En s'adaptant aux modèles et aux collections, nous pouvons éviter que la logique de traitement des données soit placée dans notre couche de vue. De plus, les modèles et les collections fournissent des moyens pratiques de travailler avec le backend, et lorsque les données changent, les vues Backbone.js peuvent être automatiquement marquées. De cette façon, il peut être utilisé dans les cas suivants:
La copie de code est la suivante:
Modèle: animal, collection: zoo
Habituellement, votre ensemble convient uniquement à un seul modèle, mais le modèle lui-même n'est pas limité au type de l'ensemble.
La copie de code est la suivante:
Modèle: Personne, collection: bureau
Modèle: Personne, collection: maison
Voici des exemples de modèles / ensembles communs:
La copie de code est la suivante:
var music = dackbone.model.extend ({{
initialiser: function () {
Console.log ("Bienvenue dans le monde de la musique");
}
});
var album = saillie.collection.extend ({{
Modèle: musique
});
Le code ci-dessus nous indique comment créer une collection. Mais cela ne nous dit pas le processus de manipulation de l'ensemble avec des données. Alors, explorons ce processus:
La copie de code est la suivante:
var music = dackbone.model.extend ({{
par défaut: {
Nom: "Non spécifié",
Artiste: "Non spécifié"
},
initialiser: function () {
Console.log ("Bienvenue dans le monde de la musique"); }
});
var album = saillie.collection.extend ({{
Modèle: musique
});
var music1 = new music ({id: 1, nom: "comment bizarre", artiste: "OMC"});
var music 2 = new music ({id: 2, nom: "ce qui fait le plus mal", artiste: "Rascal Flatts"});
var myalbum = nouvel album ([Music 1, Music 2]);
console.log (myalbum.models);
Jetons un coup d'œil à la relation entre la collection d'épine dorsale.js et d'autres composants:
1. Ajouter un modèle à la collection
Comme nous le savons, un ensemble est une collection de modèles. Par conséquent, nous pouvons ajouter des modèles sur la collection. Pour ajouter un modèle à une collection, nous pouvons utiliser la méthode ADD. Nous pouvons également ajouter le modèle au début de la collection - en utilisant la méthode de décalage.
La copie de code est la suivante:
var music3 = new music ({id: 3, nom: "Oui je fais", artiste: "Rascal Flatts"});
Music.add (music3);
Console.log («Nouvelle chanson ajoutée»);
Console.log (JSON.Stringify (musique));
2. Retirez le modèle de l'ensemble
Plusieurs fois, nous avons besoin de supprimer certaines données spécifiées de la collecte. Pour supprimer le modèle de la collection, nous devons fournir l'ID du modèle. Si nous voulons remplacer la collection d'origine par un nouvel ensemble de données complet, nous pouvons utiliser la méthode de réinitialisation.
La copie de code est la suivante:
Music.Remove (1);
console.log («Comment supprimé bizarre ...»);
Console.log (JSON.Stringify (musique));
3. Profitez et réglez
Si nous devons obtenir une valeur d'une collection ailleurs dans le code, nous pouvons utiliser directement la méthode GET. À ce stade, nous passons la valeur d'ID au modèle avec la recherche.
La copie de code est la suivante:
console.log (json.stringify (music.get (2)));
Il existe une implémentation intéressante de la méthode SET de l'ensemble. La méthode SET effectue des mises à jour "intelligentes" de la collection en passant la liste des modèles. Si le modèle de la liste n'est pas dans la collection, il est ajouté à la collection. Si le modèle est déjà dans la collection, ses propriétés sont fusionnées. Si la collection contient un modèle qui n'appartient pas à la liste, le modèle est supprimé.
La copie de code est la suivante:
var music = dackbone.model.extend ({{
// cet attribut doit être défini par défaut
par défaut: {
Nom: ''
},
// Définit l'attribut ID afin que la collection
idattribute: 'id'
});
var Song = Backbone.Collection.Extend ({{
Modèle: musique
});
var modèles = [{
Nom: «OMC»,
ID: 1
}, {
Nom: «Flatts»,
ID: 2
}];
Var Collection = New Song (modèles);
collection.bind ('add', fonction (modèle) {
alert ('addb')
});
collection.bind ('retire', function () {
alert ('add')
});
modèles = [{
Nom: «OMC»,
ID: 1
}, {
Nom: «Flatts»,
ID: 2
}, {
Nom: «Jackson»,
ID: 3
}];
Collection.Add (modèles);
});
Comme nous l'avons vu ci-dessus, nous avions déjà 2 modèles à l'avance, et lorsque nous avons ajouté le 3ème modèle, le modèle précédent est resté le même.
Iv. Constructeur et initialisation
Lorsque nous créons une collection, nous pouvons passer le tableau initialisé du modèle. Le comparateur de l'ensemble peut être ajouté en option. Si l'option de comparaison passée est fausse, le tri est évité. Si nous définissons une fonction d'initialisation, cette fonction sera appelée lorsque la collection sera créée. Voici plusieurs options, si elles sont fournies, seront ajoutées directement à l'ensemble: modèle et comparateur.
La copie de code est la suivante:
var tabs = new tabset ([tab1, tab2, tab3]);
var espaces = new squelette.collection ([], {
Modèle: espace
});
5. Tojson
La méthode TOJSO renvoie un tableau dans la collection contenant chaque attribut de hachage modèle. Cette méthode est généralement utilisée pour sérialiser et persister l'ensemble entier.
La copie de code est la suivante:
var chanson = new squelette.collection ([
{nom: "Flatts"},
{nom: "OMC"},
{nom: "Jackson"}
]));
alert (json.stringify (chanson));
6. Comparateur
Par défaut, les collections n'ont pas de comparateurs. Si nous définissons un comparateur, il peut être utilisé pour garder l'ensemble en quelque sorte. Cela signifie que lors de l'ajout d'un modèle, le modèle est inséré dans l'emplacement approprié de la collection. Le comparateur peut être défini dans Sortby ou indique des propriétés triées dans une chaîne.
La fonction de comparateur Sortby obtient un modèle et renvoie un nombre ou une chaîne.
La fonction de comparateur de tri obtient deux modèles. Si le premier modèle est en avance sur le deuxième modèle, retourne -1; Si les deux modèles sont du même niveau, retourne 0; Si le deuxième modèle est en avance sur le premier modèle, retourne 1.
Jetons un coup d'œil à l'exemple ci-dessous:
La copie de code est la suivante:
var étudiant = squelette.model;
var étudiants = new squelette.collection;
étudiants.comparator = 'name';
Students.Add (New Student ({Name: "Name1", Roll: 9}));
Students.Add (New Student ({Name: "Name2", Roll: 5}));
Students.Add (New Student ({Name: "Name3", Roll: 1}));
alert (étudiants.Pluck ('roll'));
L'ensemble à comparer n'est pas automatiquement réorganisé, même si nous modifions les propriétés du modèle. Par conséquent, nous devons appeler le tri lorsque l'estimation affectera le tri après la modification des attributs du modèle.
7. Trier
Lors de l'ajout de modèles à une collection, la collection doit être obligée d'être réorganisée. Pour désactiver le tri lors de l'ajout d'un modèle de collecte, vous pouvez passer le paramètre {Sort: False}. L'appel du déclencheur trié vérifie ce paramètre.
La copie de code est la suivante:
sortByType: fonction (type) {
this.sortKey = type;
this.sort ();
}
Et afficher les fonctions:
La copie de code est la suivante:
TROUTTHINGSBYCOLUMM: fonction (événement) {
var type = event.currentTarget.classList [0]
this.collections.things.sortbytype (type)
this.render ()
}
8. Picking
Pluck: choisissez un attribut de chaque modèle de la collection, ce qui équivaut à appeler la carte de l'itérateur et à renvoyer un seul attribut.
La copie de code est la suivante:
var chanson = new squelette.collection ([
{nom: "Flatts"},
{nom: "OMC"},
{nom: "Jackson"}
]));
var names = songs.cuck ("name");
alert (json.stringify (noms));
9. Où
Où: Renvoie un tableau de modèles dans la collection qui correspond aux propriétés passées, à l'aide de filtres.
La copie de code est la suivante:
var chanson = new squelette.collection ([
{nom: "Oui je fais", artiste: "Flatts"},
{nom: "Comment bizarre", artiste: "Comment bizarre"},
{nom: "Ce qui fait le plus mal", artiste: "Flatts"},
]));
var artistes = Song.where ({artiste: "Flatts"});
alerte (artistes.lengle);
10. URL
La définition des propriétés d'URL dans la collection fera référence à l'emplacement du serveur. Les modèles de la collection utiliseront cette URL pour construire leur propre URL.
La copie de code est la suivante:
var Songs = Backbone.Collection.Extend ({{
URL: '/ Songs'
});
var Songs = Backbone.Collection.Extend ({{
url: function () {
Renvoie this.document.url () + '/ chansons';
}
});
11. Analyse
Parse: appelé par épine dorsale lors de la récupération, que le serveur renvoie le modèle de la collection. Cette fonction transmet l'objet de réponse d'origine, qui doit renvoyer un tableau de propriétés du modèle ajouté à la collection. L'implémentation par défaut est une opération sans opération. Passez simple à travers la réponse JSON, écrasez cela avec une API préexistante ou une meilleure réponse de l'espace de noms.
La copie de code est la suivante:
var Songs = Backbone.Collection.Extend ({{
Parse: fonction (réponse) {
Retour Response.Results;
}
});
12. Extraction
Fetch: extraire le jeu de modèle par défaut de la collection du serveur et définissez-les dans la collection après la récupération. Cette option Hash accepte le succès ou les rappels d'erreur, qui transmet trois paramètres (ensemble, réponse, option). Renvoyez ensuite les données du modèle du serveur. Il est utilisé pour configurer le modèle extrait fusionné.
La copie de code est la suivante:
Backbone.Sync = fonction (méthode, modèle) {
alert (méthode + ":" + modèle.url);
};
var Songs = new Backbone.collection;
Songs.Url = '/ Songs';
Songs.fetch ();
Comme vous pouvez le voir ci-dessus, il existe de nombreuses façons de les maîtriser pour améliorer la qualité de votre code.