77 votes

Comprendre les appels Backbone.js reste

Je suis en train d'essayer de comprendre les Backbone.js méthode de synchronisation et a été en passant par la documentation sur http://backbonejs.org/#Sync

Il dit

The default sync handler maps CRUD to REST like so:

create → POST   /collection
read → GET   /collection[/id]
update → PUT   /collection/id
delete → DELETE   /collection/id

Maintenant, depuis que je l'ai toujours été à l'avant-fin du développement et de la nouvelle Dorsale, je trouve le au-dessus de dur à comprendre...je n'ai jamais utilisé de REPOS ou de tout autre serveur de protocoles côté...

Pourriez-vous expliquer la même chose en des termes simples (comme le RESTE des cartes lorsque nous utilisons de la colonne vertébrale.sync) Tout exemple très simple serait d'une grande utilité...

311voto

ZachRabbit Points 2210

Si vous n'avez pas l'esprit, je vais commencer avec l'éclaircissement de certains mots. Le REPOS n'est pas un protocole en lui-même, c'est simplement une façon d'utiliser le protocole HTTP. Le RESTE de style est particulièrement utile pour les Api, comme je l'espère, vous verrez. Quand une API est conforme à ce style, il est dit d'être de "repos". Si l'API vous travaillez avec n'est pas Reposant, vous aurez à faire beaucoup de changements à la colonne vertébrale.synchronisation afin de l'obtenir pour fonctionner. Alors j'espère qu'il est! :)

Le Protocole HTTP

J'aime exemples, voici donc une requête HTTP pour obtenir le code HTML de cette page:

GET /questions/18504235/understand-backbone-js-rest-calls HTTP/1.1
Host: stackoverflow.com

[Facultatif] Si vous n'avez jamais joué avec la ligne de commande ou un terminal, essayez d'exécuter la commande telnet stackoverflow.com 80 et le coller dans le ci-dessus, puis en appuyant sur entrée une couple de fois. Voila! HTML dans l'ensemble de sa gloire.

Dans cet exemple...

  • GET est la méthode.
  • /questions/18504235/understand-backbone-js-rest-calls est le chemin d'accès.
  • HTTP/1.1 est le protocole.
  • Host: stackoverflow.com est un exemple d' en-tête.

Votre navigateur ne prend environ le même, avec plusieurs têtes, afin d'obtenir le code HTML de cette page. Cool, hein?

Puisque vous travaillez en front-end, vous avez probablement vu la balise de formulaire de nombreuses fois. Voici un exemple de l'un:

<form action="/login" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" name="submit" value="Log In" />
</form>

Lorsque vous soumettez ce formulaire avec les données appropriées, votre navigateur envoie une requête qui ressemble à quelque chose comme ceci:

POST /login HTTP/1.1
Host: stackoverflow.com

username=testndtv&password=zachrabbitisawesome123&submit=Log%20In

Il y a trois différences entre l'exemple précédent et de celui-ci.

  1. La méthode est désormais POST.
  2. Le chemin est maintenant /login.
  3. Il existe une ligne supplémentaire, appelé le corps.

Bien qu'il existe un tas d'autres méthodes, celles utilisées dans Reposante applications sont POST, GET, PUT, et DELETE. Cela indique au serveur quel type d'action il est censé prendre avec les données, sans avoir besoin d'avoir des chemins différents pour tout.

Retour à la Dorsale

Alors j'espère que vous comprenez maintenant un peu plus sur la façon de le HTTP fonctionne. Mais comment est-ce lié à l'épine Dorsale? Voyons!

Voici un petit morceau de code que vous pourriez trouver dans un Squelette d'application.

var BookModel = Backbone.Model.extend({
    urlRoot: '/books'
});
var BookCollection = Backbone.Collection.extend({
    model: BookModel
    , url: '/books'
});

Créer des (POST)

Puisque nous sommes à l'aide d'une API RESTful, c'est tout le réseau d'information doit être capable de créer, lire, mettre à jour et supprimer l'ensemble de nos informations sur le livre! Commençons par faire un nouveau livre. Le code suivant devrait suffire:

var brandNewBook = new BookModel({ title: '1984', author: 'George Orwel' });
brandNewBook.save();

Épine dorsale se rend compte que vous essayez de créer un nouveau livre, et sait à partir de l'information qu'il a été donné de faire la requête suivante:

POST /books HTTP/1.1
Host: example.com

{"title":"1984","author":"George Orwel"}

Lecture (GET)

Voyez comment facile qui a été? Mais nous voulons obtenir que les informations de dos à un certain point. Disons que nous avons couru new BookCollection().fetch(). Épine dorsale serait de comprendre que vous êtes en train de lire une collection de livres, et il en ferait la demande suivante:

GET /books HTTP/1.1
Host: example.com

BAM. Que facile. Mais dire que nous n'avons voulu les informations d'un livre. Disons que le livre n ° 42. Dire que nous avons couru new BookModel({ id: 42 }).fetch(). Épine dorsale voit que vous essayez de lire un seul livre:

GET /books/42 HTTP/1.1
Host: example.com

Mise à jour (METTRE)

Oh mince, je viens de réaliser que j'ai définis M. Orwell nom de mal. Facile à corriger!

brandNewBook.set('author', 'George Orwell');
brandNewBook.save();

La dorsale est assez intelligent pour savoir qu'en dépit d'être appelé brandNewBook, ça a déjà été enregistré. Donc les mises à jour de l'ouvrage:

PUT /books/84 HTTP/1.1
Host: example.com

{"title":"1984","author":"George Orwell"}

Delete (SUPPRIMER)

Enfin, vous vous rendez compte que le gouvernement est suivi de tous vos déplacements, et vous avez besoin d'enterrer le fait que vous avez lu 1984. Il est probablement trop tard, mais il ne fait jamais de mal d'essayer. Si vous exécutez brandNewBook.destroy(), et de la colonne vertébrale devient sensible et réalise votre danger supprime le livre avec la requête suivante:

DELETE /books/84 HTTP/1.1
Host: example.com

Et c'est parti.

D'Autres Friandises

Alors que nous avons beaucoup parlé de ce que nous allons envoyer au serveur, nous devrions sans doute nous aussi jeter un oeil à ce que nous obtenons en retour. Revenons-en à notre collection de livres. Si vous vous souvenez, nous avons fait une GET demande /books. En théorie, nous devrions revenir à quelque chose comme ceci:

[
    {"id":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"}
    , {"id":3,"author":"J. R. R. Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"}
]

Rien de trop effrayant. Et encore mieux, de la colonne vertébrale sait comment gérer cette sortie de la boîte. Mais que faire si nous avons changé un peu? Au lieu de id étant le champ d'identification, il a été bookId?

[
    {"bookId":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"}
    , {"bookId":3,"author":"J. R. R. Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"}
]

Épine dorsale obtient que chaque API est un peu différent, et il est d'accord avec ça. Tout ce que vous avez à faire est de laisser savoir à l' idAttribute, comme suit:

var BookModel = Backbone.Model.extend({
    urlRoot: '/books'
    , idAttribute: 'bookId'
});

Vous n'avez qu'à ajouter de l'information pour le modèle, depuis la collecte vérifie le modèle de toute façon. Donc, juste comme ça, de la colonne vertébrale comprend votre API! Même si je ne suis pas...

L'inconvénient de cette est que vous avez à retenir pour utiliser bookId dans certains cas. Par exemple, où nous avons déjà utilisé new BookModel({ id: 42 }).fetch() de charger les données sur un seul livre, nous avons maintenant à utiliser new BookModel({ bookId: 42 }).fetch().


Nous espérons que vous avez trouvé cette réponse informative, et pas trop insupportablement ennuyeux. Je me rends compte que pour beaucoup, le protocole HTTP et le repos, l'architecture ne sont pas les plus exaltantes de sujets, j'ai donc essayé de pimenter un peu. Je peut regretter que quand j'ai lu l'ensemble de ce retour à un point plus tard, mais il est 2H du matin ici, donc je vais aller de l'avant et de présenter cela de toute façon.

4voto

GijsjanB Points 2604

En supposant que vous comprenez les appels ajax (POST, GET, etc. à ' / collection', etc.).

Épine dorsale utilise sync pour acheminer certaines méthodes modèles et Collections au reste des appels.

appels

Si vous passez l’url (/ collection) vous voulez utiliser un modèle/collection, épine dorsale s’occupera des appels.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X