77

Backbone.js 同期方法を理解しようとしており、 http://backbonejs.org/#Syncのドキュメントを調べていました。

それは言う

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

私は常にフロントエンド開発に携わっていて、Backbone を初めて使用するので、上記の内容を理解するのは難しいと思います...REST やその他のサーバー側プロトコルを使用したことがありません...

同じことを簡単な言葉で説明していただけますか (Backbone.sync を使用するときに REST がどのようにマップされるかなど)、非常に単純な例は非常に役立ちます...

4

2 に答える 2

316

差し支えなければ、文言の整理から始めます。REST 自体はプロトコルではなく、単に HTTP プロトコルを使用する方法です。ご覧のとおり、REST スタイルは API に特に役立ちます。API がそのスタイルに準拠している場合、それは「RESTful」であると言われます。使用している API が RESTful でない場合、Backbone.sync を機能させるには、Backbone.sync に多くの変更を加える必要があります。うまくいけばそうです！:)

HTTP プロトコル

私は例が好きなので、このページの HTML を取得するための HTTP リクエストを次に示します。

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

[オプション] コマンド ラインまたはターミナルで遊んだことがある場合は、コマンドを実行telnet stackoverflow.com 80して上記を貼り付け、Enter キーを数回押してみてください。出来上がり！栄光のすべての HTML。

この例では...

  • GET方法です。
  • /questions/18504235/understand-backbone-js-rest-callsはパスです。
  • HTTP/1.1はプロトコルです。
  • Host: stackoverflow.comヘッダーの例です。

ブラウザーは、このページの HTML を取得するために、ヘッダーを追加するだけでほぼ同じことを行います。かっこいいでしょ？

あなたはフロントエンドで働いているので、フォームタグを何度も目にしたことがあるでしょう。以下にその例を示します。

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

このフォームを適切なデータとともに送信すると、ブラウザは次のようなリクエストを送信します。

POST /login HTTP/1.1
Host: stackoverflow.com

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

前の例とこの例には 3 つの違いがあります。

  1. メソッドは今ですPOST。
  2. パスは現在/loginです。
  3. bodyと呼ばれる追加の行があります。

他にもたくさんの方法がありますが、RESTful アプリケーションで使用されるのはPOST、GET、PUT、およびDELETEです。これにより、すべてに対して異なるパスを用意する必要なく、データに対してどのようなアクションを実行する必要があるかがサーバーに伝えられます。

バックボーンに戻る

これで、HTTP の仕組みについて少し理解できたと思います。しかし、これはバックボーンとどのように関連していますか? 確認してみましょう！

以下は、バックボーン アプリケーションで見られるコードの小さなチャンクです。

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

作成 (投稿)

RESTful API を使用しているため、Backbone がすべての書籍情報を作成、読み取り、更新、および削除できるようにするために必要な情報はこれだけです。新しい本を作ることから始めましょう。次のコードで十分です。

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

Backbone は、あなたが新しい本を作成しようとしていることを認識し、与えられた情報から次の要求を行うことを認識しています。

POST /books HTTP/1.1
Host: example.com

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

読み取り (GET)

それがどれほど簡単だったかわかりますか？しかし、私たちはある時点でその情報を取り戻したいと考えています。走ったとしましょうnew BookCollection().fetch()。バックボーンは、あなたが本のコレクションを読もうとしていることを理解し、次のリクエストを行います:

GET /books HTTP/1.1
Host: example.com

バム。それは簡単です。しかし、1 冊の本の情報だけが必要だとします。ブック＃42としましょう。走ったとしましょうnew BookModel({ id: 42 }).fetch()。Backbone は、あなたが1本の本を読もうとしているのを見ます:

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

更新 (PUT)

オーウェルさんの名前のつづりを間違えたことに今気づきました。簡単に直せます！

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

Backbone は、呼び出されたにもかかわらずbrandNewBook、既に保存されていることを認識できるほどスマートです。したがって、本を更新します。

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

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

削除 (DELETE)

最後に、政府があなたのすべての動きを追跡していることに気付き、1984 年を読んだという事実を埋める必要があります。おそらく手遅れですが、試してみる価値はあります。あなたが を実行するbrandNewBook.destroy()と、Backboneは知性を持ち、あなたの危険性に気づき 、次のリクエストで本を削除します:

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

そして、それはなくなりました。

その他の便利なヒント

サーバーに何を送信するかについて多くのことを話してきましたが、返されるものについても検討する必要があります。本のコレクションに戻りましょう。にGETリクエストを送信しました/books。理論的には、次のような結果が得られるはずです。

[
    {"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"}
]

何も怖くない。さらに良いことに、Backbone はすぐにこれを処理する方法を知っています。でも、ちょっと変えてみたら？id識別フィールドではなく、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"}
]

Backbone は、すべての API が少しずつ異なることを認識しており、それで問題ありません。あなたがしなければならないのは、次のように を知らせることだけですidAttribute:

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

コレクションはとにかくモデルをチェックするので、その情報をモデルに追加するだけで済みます。そのように、Backbone は API を理解します! しなくても…

これの欠点は、特定の場合に使用することを覚えておく必要がbookIdあることです。たとえば、以前new BookModel({ id: 42 }).fetch()は 1 冊の本に関するデータを読み込むために使用していましたが、現在は を使用する必要がありますnew BookModel({ bookId: 42 }).fetch()。

うまくいけば、この回答が参考になり、耐えられないほど退屈ではありません. 多くの人にとって、HTTP プロトコルと RESTful アーキテクチャーは最も爽快なテーマではないことに気付いたので、少し刺激を加えてみました。あとで全部読んだら後悔するかもしれませんが、今は午前2時なので、とにかく提出します。

于 2013-08-29T08:57:14.127 に答える
4

ajax 呼び出し (「/collection」への POST、GET など) を理解していると仮定します。

バックボーンは同期を使用して、一部のモデルとコレクションのメソッドを REST 呼び出しにルーティングします。

model/collection.fetch() => GET
model.save() => POST (isNew())
model.save() => PUT (!isNew())
model.destroy() => DELETE

collection.create()通話model.save() (isNew()) => POST

使用したい URL (/collection) をモデル/コレクションに渡すと、Backbone が呼び出しを処理します。

于 2013-08-29T08:50:22.227 に答える