モデル
バックボーンに関しては、最も基本的なことはモデルです。これは、バックエンド開発におけるデータベースマッピングモデルのようなものです。また、データオブジェクトのモデルであり、バックエンドのモデルと同じ属性を持つ必要があります（フロントエンドで動作する必要がある属性のみ）。
バックボーンモデルが段階的に例から何であるかを見てみましょう。
最初にHTMLページを定義します。
<！Doctype html> <html> <head> <title> The5fire-Backbone-Model </title> </head> <body> </body> <scrip src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4.4/jquery.min.js"> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </scrip> <スクリプトsrc = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </scrip> <スクリプトsrc = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </scrip> <スクリプトsrc = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script>（function（$）{/***code code nere **/}）（jquery）; </html>次のコードは、このHTMLのスクリプトタグの関数に入力する必要があります。
1.最も単純なオブジェクト
man = backbone.model.extend（{initialize：function（）{alert（ 'hey、create me！'）;}}）; var man = new Man;これは非常に簡単です。属性を定義することなく、Helloworldでモデルプレゼンテーションもあります。これは、初期化中の方法、またはコンストラクターです。
2。オブジェクト割り当ての2つの方法
1つ目は、直接定義してデフォルト値を設定することです。
man = backbone.model.extend（{initialize：function（）{alert（ 'hey、create me！'）;}、defays：{name： 'zhang san'、age： '38'}}）; var man; alert（man.get（ 'name'））;2番目のタイプは、割り当て時に定義されます
man = backbone.model.extend（{initialize：function（）{alert（ 'hey、create me！'）;}}）; man.set（{name： 'the5fire'、age：'10 '}）; alert（man.get（' name '））;GET値を使用する場合、GETが使用されます。
3。オブジェクト内のメソッド
man = backbone.model.extend（{initialize：function（）{alert（ 'hey、you create me！'）;}、defays：{name： 'zhang san'、age： '38'}、aboutme：function（）{return 'my name is' + this.get（ 'name'） + ' man; alert（man.aboutme（））;4。オブジェクト内の属性の変更を聞く
man = backbone.model.extend（{initialize：function（）{alert（ 'hey、you create me！'）; // bind reastine thid initiationization this.bind（ "change：name"、function（）{var name（）{var name = this.get（ "name"）; alert（ "名前属性を変更しました：" + name）;};} }、aboutme：function（）{return '私の名前は' + this.get（ 'name'） + '、 + this.get（' age '） +' year '）; var man = new man; man.set（{name： 'the5fire'}）//バウンドチェンジイベントのトリガー、アラート。5.オブジェクトに確認ルールを追加し、エラープロンプト
man = backbone.model.extend（{initialize：function（）{alert（ 'hey、you create me！'）; // bind reastine thid initiationization this.bind（ "change：name"、function（）{var name（）{var name = this.get（ "name"）; alert（ "name属性を変更しました：" + name）; }）、defaults：{name： 'Zhang San'、 '38'}、function（astributes）{if（astributes.name == ''）{return "nage nable ve vey！}} }}）; var man = new man; man.set（{name： ''}）; //検証ルールによると、エラーメッセージが表示されます。6.オブジェクトの取得とストレージには、サーバー側のサポートをテストする必要があります。
まず、オブジェクトのURL属性を定義する必要があります。保存メソッドを呼び出すと、オブジェクトのすべての属性がサーバーに投稿されます。
man = backbone.model.extend（{url： '/save/'、initialize：function（）{alert（ 'hey、you create me！'）; // bind in vind（ "change：name"、function（）{var name = this.get（ "name"）; alert（ "you named ultibut attribut attus to" + name）; this.bind（ "error"、function（model、error）{alert（error）;}}、{name： 'zhang san'、 '38'}、function（属性）{if（属性== ''）{return "nage nage '}（ '、今年' + this.get（ 'age'） + 'year-hind'}）; var man ;; man.set（{name： 'the5fire'}）; man.save（）; //投稿はモデルに対応するURLに送信され、データ形式はjson {"name"： "the5fire"、 "age"：38} //です。またはサーバー側に投稿します。 man1.fetch（）; // 2番目のケースでは、次のようにフェッチにパラメーターを追加します：man1.fetch（{url： '/getmans/'}）; //このようにして、GETリクエストがURL/GetMansに送信されます。 //サーバーによって返される結果スタイルは、保存時にPOST形式と同じである対応するJSON形式のデータである必要があります。 //サーバーによって返されたデータを受け入れる方法は次のとおりです。MAN1.FETCH（{url： '/getmans/'、success：function（model、response）{alert（ 'success'）; //モデルは取得したデータアラート（モデル。get（ 'name'）） alert（ 'error'）;注：上記のコードは、正常に実行できるコードのみですが、サーバー側については後でインスタンスがあります。
ここでは、サーバーの非同期操作がbackbone.syncメソッドを介して完了していることを追加する必要があります。このメソッドを呼び出すと、パラメーターが自動的に渡され、対応するリクエストがパラメーターに従ってサーバーに送信されます。たとえば、保存してバックボーンがオブジェクトが新しいかどうかを判断します。新しく作成されている場合、パラメーターは作成されます。既存のオブジェクトである場合、変更されただけで、パラメーターは更新されます。 Fetchメソッドを呼び出すと、パラメーターが読み取られます。不快な場合、パラメーターは削除されます。つまり、いわゆるCRUD（ "Create"、 "read"、 "update"、または "delete"）であり、これらの4つのパラメーターに対応するリクエストタイプは、post、get、put、deleteです。この要求タイプに基づいて、サーバーで対応するCRUD操作を作成できます。
注記：
URLとURLROOTに関して、URLを設定すると、CRUDは対応するリクエストをこのURLに送信します。ただし、もう1つの問題は、削除要求が送信されることですが、データは送信されません。次に、サーバー側でどのオブジェクト（レコード）を削除するかがわかりません。したがって、ここにUrlrootの別の概念があります。 urlrootを設定した後、リクエストを送信して削除すると、リクエストのURLアドレスは： /baseurl/ [model.id]であるため、サーバー側のURLの後に値を抽出して、対応するオブジェクト（レコード）を更新または削除できます。
コレクション
コレクションは、モデルオブジェクトの注文されたコレクションです。概念を理解するのは非常に簡単です。いくつかの例を通してそれを見ると、よりシンプルになります。
1。本と本棚に関する例
book = backbone.model.extend（{defaults：{// blue power correctionをdefaultstitle： 'default'}に変更してくれたネチズンに感謝します。 'book1'}）; var book2 = new book（{title： 'book2'}）; var book3 = new book（{title： 'book3'}）; // var bookshelf（[book1、book2、book3]）; //それが配列であるか、Addvar Bookshelf = new Bookshelf; bookshelf.add（bookshelf.add（book2）; bookshelf.add（book3）; bookshelf.remove（book3）; // Underscore JSライブラリに基づいて、各方法）を使用して、コレクションのデータを取得することもできます。 bookshelf.each（function（book）{alert（book.get（ 'title'））;}）;非常にシンプルで、説明なし
2。フェッチを使用してサーバー側からデータを取得します
まず、上記の本棚にURLを定義する必要があります。 Urlrootプロパティはコレクションには存在しないことに注意してください。または、次のように、FetchメソッドのURLの値を直接定義します。
bookshelf.fetch（{url： '/getbooks/'、success：function（collection、response）{collection.each（function（book）{alert（book.get（ 'title'））;}）;}、error：function（）{alert（ 'error'）;}}）;また、返品値を受け入れる2つの方法もあります。特定の意味を理解するのは簡単だと思います。正しい形式でデータを返す場合、成功方法を呼び出し、エラー方法が呼び出されます。もちろん、エラー方法は、成功方法と同じ正式なパラメーターを追加することにも依存します。
対応する本棚返品形式は次のとおりです。
3。リセットメソッド
この方法を使用する場合は、上記のフェッチと調整する必要があります。コレクションがデータを取得すると、リセットメソッドが呼び出されるため、リセットメソッドを定義するか、コレクションのリセットメソッドをバインドする必要があります。これがバインディングの使用のデモです：
bookshelf.bind（ 'reset'、showallbooks）; showallbooks = function（）{bookshelf.each（function（book）{//本のデータをページにレンダリングします。}）;}ファッチを取得する前に、バインディングステップを実行する必要があります。
コレクションに関する完全なコードを以下に示します。これには、サーバー側のサポートが必要です。サーバー側の構造は後で記述されます。
<！Doctype html> <html> <head> <title> The5fire-Backbone-collection </title> </head> <body> </body> <scrip src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4.4/jquery.min.js"> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </scrip> <スクリプトsrc = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </scrip> <スクリプトsrc = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </scrip> <スクリプトsrc = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script>（$）{//コレクションはシンプルなモデルの注文されたコレクション//1。デフォルトのタイトル：function（）{// backshelf = backbone.collection（{model：book}）; 'book3}） i <bookshelf.models.length（bookshelf.get（ 'title'））; render bookshelf.bind（ 'reset'、showallbooks）; bookshelf.each（function（book）{//ページにレンダリングされます。} //上記のコードは正常に実行できるコードのみですが、サーバー側のインスタンスはjquery）; </script> </html>