BackboneJS-概要

BackboneJSは、Webブラウザで実行されるクライアント側アプリケーションの開発と構造化を可能にする*軽量なJavaScriptライブラリ*です。データをモデルに、DOMをビューに抽象化し、イベントを使用してこれら2つをバインドするMVCフレームワークを提供します。

歴史-BackboneJSはJeremy Ashkenasによって開発され、2010年10月13日に最初にリリースされました。

Backboneを使用する場合

JavaScriptまたはjQueryを使用して、多数のコード行を持つアプリケーションを作成していると考えてください。このアプリケーションでは、あなたが-
DOM要素をアプリケーションに追加または置換するか、
いくつかの要求を行うか、
アプリケーションでアニメーションを表示する、または
コードに行数を追加し、 +その後、アプリケーションが複雑になる可能性があります。
より少ないコードでより良い設計が必要な場合は、優れた機能を提供し、適切に組織化され、構造化された方法でアプリケーションを開発するBackboneJSライブラリを使用することをお勧めします。
BackboneJSはイベントを介して通信します。これにより、アプリケーションが混乱することはありません。あなたのコードは、よりきれいで、より良く、維持しやすいでしょう。

特徴

以下はBackboneJSの機能のリストです-

BackboneJSでは、JavaScript関数を使用することにより、はるかに簡単な方法でアプリケーションとフロントエンドを開発できます。
BackboneJSは、クライアントサイドWebアプリケーションをアセンブルするためのモデル、ビュー、イベント、ルーター、コレクションなどのさまざまな構成要素を提供します。
モデルが変更されると、アプリケーションのHTMLが自動的に更新されます。
BackboneJSは、ビジネスとユーザーインターフェイスのロジックを分離するのに役立つシンプルなライブラリです。
無料でオープンソースのライブラリであり、100を超える利用可能な拡張機能が含まれています。
プロジェクトのバックボーンのように機能し、コードの整理に役立ちます。
ユーザーデータを含むデータモデルを管理し、そのデータをサーバー側でクライアント側で記述された同じ形式で表示します。
BackboneJSには、 jQuery との弱い依存関係と、 Underscore.js との強い依存関係があります。
クライアント側のWebアプリケーションまたはモバイルアプリケーションを、適切に構成された組織化された形式で作成できます。

BackboneJS-環境設定

BackboneJSは、セットアップと作業が非常に簡単です。この章では、 BackboneJS Library のダウンロードとセットアップについて説明します。

BackboneJSは、次の2つの方法で使用できます-

公式WebサイトからUIライブラリをダウンロードしています。
CDNからUIライブラリをダウンロードしています。

公式WebサイトからUIライブラリをダウンロードする

リンクhttp://backbonejs.org/を開くと、次のようなスクリーンショットが表示されます-

Backbone.js Setup

ご覧のとおり、このライブラリのダウンロードには3つのオプションがあります-

開発バージョン-このボタンを右クリックして名前を付けて保存すると、完全なソース* JavaScriptライブラリ*が取得されます。
生産バージョン-このボタンを右クリックして名前を付けて保存すると、パックされてgzipで圧縮された* Backbone-min.jsライブラリ*ファイルが得られます。
エッジバージョン-このボタンを右クリックして名前を付けて保存すると、*未リリースバージョン*が得られます。つまり、開発が進行中です。したがって、ご自身の責任で使用する必要があります。

依存関係

BackboneJSは、次のJavaScriptファイルに依存しています-

Underscore.js -これは、含める必要がある唯一の難しい依存関係です。こちらから入手できます。
jQuery.js -RESTful永続性、Backbone.Routerによる履歴サポート、Backbone.ViewによるDOM操作のために、このファイルを含めます。こちらから入手できます。
json2.js -古いInternet Explorerのサポート用にこのファイルを含めます。 https://github.com/douglascrockford/JSON-js [こちら]から入手できます。

CDNからUIライブラリをダウンロードする

CDNまたは Content Delivery Network は、ユーザーにファイルを提供するように設計されたサーバーのネットワークです。 WebページでCDNリンクを使用すると、ファイルをホストする責任が独自のサーバーから一連の外部サーバーに移ります。これは、Webページへの訪問者が同じCDNからBackboneJSのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点も提供します。

上記のように、BackboneJSは次のJavaScriptに依存しています-

jQuery
下線

したがって、上記のすべてのCDNは次のとおりです-

<script type = "text/javascript"
   src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript"
   src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type = "text/javascript"
   src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

注-このチュートリアルでは、CDNバージョンのライブラリを使用しています。

例

BackboneJSを使用して簡単な例を作成しましょう。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
      <title>Hello World using Backbone.js</title>
   </head>

   <body>
      <!-- ========= -->
      <!-- Your HTML -->
      <!-- ========= -->
      <div id = "container">Loading...</div>
      <!-- ========= -->
      <!-- Libraries -->
      <!-- ========= -->
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
         type = "text/javascript"></script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
         type = "text/javascript"></script>
      <!-- =============== -->
      <!-- Javascript code -->
      <!-- =============== -->

      <script type = "text/javascript">
         var AppView = Backbone.View.extend ({
           //el - stands for element. Every view has an element associated with HTML content, will be rendered.
            el: '#container',

           //It's the first function called when this view is instantiated.
            initialize: function() {
               this.render();
            },

           //$el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.

           //Like the Hello finddevguides in this case.
            render: function() {
               this.$ell("Hello finddevguides!!!");
            }
         });
         var appView = new AppView();
      </script>

   </body>
</html>

コードのコメントは一目瞭然です。いくつかの詳細を以下に示します-

_body_タグの先頭にhtmlコードがあります

<div id = "container">Loading...</div>

これは Loading … を出力します

次に、次のCDNを追加しました

<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
   type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
   type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
   type = "text/javascript"></script>

次に、次のスクリプトがあります-

var AppView = Backbone.View.extend ({

  //el - stands for element. Every view has an element associated with HTML content,
  //will be rendered.
   el: '#container',

  //It's the first function called when this view is instantiated.
   initialize: function() {
      this.render();
   },

  //$el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.

  //Like the Hello World in this case.
   render: function() {
      this.$ell("<h1>Hello finddevguides!!!</h1>");
   }
});
var appView = new AppView();

コメントは一目瞭然です。最後の行では、 _ new AppView（）_ を初期化しています。これは、「Hello finddevguides」を div id = "container" に出力します

このページを myFirstExamplel という名前で保存します。これをブラウザで開くと、画面に次のテキストが表示されます。

Backbone.js Hello Example

BackboneJS-アプリケーション

BackboneJSは、ビジネスロジックとユーザーインターフェイスロジックの分離を可能にする構造をWebアプリケーションに提供します。この章では、ユーザーインターフェイスを実装するためのBackboneJSアプリケーションのアーキテクチャスタイルについて説明します。次の図は、BackboneJSのアーキテクチャを示しています-

Backbone.jsアーキテクチャ

BackboneJSのアーキテクチャには、次のモジュールが含まれています-

HTTPリクエスト
ルーター
View
イベント
モデル
コレクション
情報源

ここで、すべてのモジュールについて詳しく説明します。

HTTPリクエスト

HTTPクライアントは、Webブラウザ、検索エンジンなどがHTTPクライアントのように動作する要求メッセージの形式でサーバーにHTTP要求を送信します。ユーザーは、HTTP要求プロトコルを使用して、ドキュメント、画像などのファイルを要求します。上記の図では、HTTPクライアントがルーターを使用してクライアント要求を送信していることがわかります。

ルーター

クライアント側アプリケーションのルーティングに使用され、URLを使用してアクションとイベントに接続します。これは、アプリケーションのオブジェクトのURL表現です。このURLは、ユーザーが手動で変更します。バックボーンはURLを使用して、ユーザーに送信または表示するアプリケーションの状態を理解できるようにします。

ルーターは、URLをコピーしてビューに到達できるメカニズムです。ルーターは、Webアプリケーションがアプリ内の重要な場所にリンク可能、ブックマーク可能、共有可能なURLを提供する場合に必要です。

上記のアーキテクチャでは、ルーターはHTTP要求をViewに送信します。アプリケーションにルーティング機能が必要な場合に便利な機能です。

View

BackboneJSビューは、アプリケーションからどのように何を表示するかを担当し、アプリケーションのHTMLマークアップを含みません。ユーザーへのモデルのデータのプレゼンテーションの背後にあるアイデアを指定します。ビューは、「データモデルの外観」を反映するために使用されます。

ビュークラスはHTMLとCSSについて何も知らないため、ページ全体をリロードせずにモデルが変更された場合、各ビューを個別に更新できます。 DOM内のUIの論理チャンクを表します。

上記のアーキテクチャに示されているように、ビューは、ルーターを使用して行われたユーザー要求に対する応答を表示するユーザーインターフェイスを表します。

イベント

イベントは、アプリケーションの主要部分です。ユーザーのカスタムイベントをアプリケーションにバインドします。これらは任意のオブジェクトに混在させることができ、カスタムイベントをバインドおよびトリガーできます。任意の名前を使用して、カスタムイベントをバインドできます。

通常、イベントはプログラムフローと同期して処理されます。上記のアーキテクチャでは、イベントが発生すると、ビューを使用してモデルのデータを表します。

モデル

これは、データを取得および入力するJavaScriptアプリケーションの中心です。モデルには、アプリケーションのデータ、データのロジックが含まれ、フレームワークの基本的なデータオブジェクトを表します。

モデルは、いくつかのビジネスロジックとビジネス検証を備えたビジネスエンティティを表します。主にデータストレージとビジネスロジックに使用されます。モデルは、データストレージから取得したり、データストレージに保存したりできます。モデルは、ルーターを使用してビューから渡されたイベントからHTTPリクエストを取得し、データベースからのデータを同期し、クライアントに応答を送信します。

コレクション

コレクションは、コレクション内でモデルが変更されたときにイベントをバインドするモデルのセットです。このコレクションには、ループで処理できるモデルのリストが含まれており、並べ替えとフィルタリングをサポートしています。コレクションを作成するとき、プロパティのインスタンスとともに、そのコレクションが持つモデルのタイプを定義できます。モデルでトリガーされたイベントは、モデル内のコレクションでもトリガーされます。

また、ビューから要求を取得し、イベントをバインドし、要求されたデータとデータを同期し、HTTPクライアントに応答を送り返します。

情報源

これは、サーバーからデータベースにセットアップされた接続であり、クライアントから要求された情報が含まれています。 BackboneJSアーキテクチャの流れは、次の手順に示すように記述することができます-

ユーザーは、URLを使用してアプリケーションをイベントにルーティングするルーターを使用してデータを要求します。
ビューは、ユーザーにモデルのデータを表します。
モデルとコレクションは、カスタムイベントをバインドすることにより、データベースからデータを取得して入力します。

次の章では、BackboneJSのイベントの重要性を理解します。

BackboneJS-イベント

イベントはオブジェクトをバインドでき、カスタムイベントをトリガーします。希望する名前を使用してカスタムイベントをバインドできます。

次の表には、BackboneJS-Eventsを操作するために使用できるすべてのメソッドがリストされています-

S.No.	Methods & Description
1	on イベントをオブジェクトにバインドし、イベントが発生するたびにコールバックを実行します。
2	off オブジェクトからコールバック関数またはすべてのイベントを削除します。
3	trigger 指定されたイベントのコールバック関数を呼び出します。
4	once 独自のバックボーンモデルを作成しながら、backbone.Modelクラスを拡張します。
5	listenTo あるオブジェクトに別のオブジェクトのイベントをリッスンするよう通知します。
6	stopListening 他のオブジェクトのイベントのリッスンを停止するために使用できます。
7	listenToOnce コールバック関数が削除される前に一度だけlistenToが発生します。

組み込みイベントのカタログ

BackboneJSを使用すると、アプリケーションで必要に応じてグローバルイベントを使用できます。次の表に示すように、引数付きの組み込みイベントの一部が含まれています-

S.No.	Events & Description
1	"add"(model, collection, options) モデルがコレクションに追加されるときに使用されます。
2	"remove"(model, collection, options) コレクションからモデルを削除します。
3	"reset"(collection, options) コレクションのコンテンツをリセットするために使用されます。
4	"sort"(collection, options) コレクションを再ソートする必要がある場合に使用されます。
5	"change"(model, options) モデルの属性を変更する場合に使用されます。
6	"change:[attribute]"(model, value, options) 属性に更新がある場合に使用されます。
7	"destroy"(model, collection, options) モデルが破壊されると起動します。
8	"request"(model_or_collection, xhr, options) モデルまたはコレクションがサーバーへの要求を開始するときに使用されます。
9	"sync"(model_or_collection, resp, options) モデルまたはコレクションがサーバーと正常に同期されるときに使用されます。
10	"error"(model_or_collection, resp, options) サーバーへのリクエストでエラーが発生するとアクティブになります。
11	"invalid"(model, error, options) モデルの検証に失敗すると、無効な値が返されます。
12	"route:[name]"(params) 特定のルート一致がある場合、このイベントを使用できます。
13	"route"(route,params) いずれかのルートと一致する場合に使用されます。
14	"route"(router, route, params) いずれかのルートと一致する場合、履歴によって使用されます。
15	"all" 最初の引数として渡すイベント名によって、トリガーされたすべてのイベントに対して起動します。

BackboneJS-モデル

モデルには動的データとそのロジックが含まれます。変換、検証、計算されたプロパティ、アクセス制御などのロジックは、Modelカテゴリに分類されます。すべてのアプリケーションデータが含まれているため、モデルは* JavaScriptアプリケーションの心臓部*とも呼ばれます。

次の表は、BackboneJS-Modelを操作するために使用できるすべてのメソッドを示しています-

S.No.	Methods & Description
1	extend 独自のバックボーンモデルを作成しながら、 backbone.Model クラスを拡張します。
2	initialize モデルインスタンスが作成されると、クラスのコンストラクターが呼び出され、モデルの作成時に初期化関数を定義することで呼び出されます。
3	get モデルの属性の値を取得します。
4	set モデルの属性の値を設定します。
5	escape これは get 関数に似ていますが、モデルの属性のHTMLエスケープバージョンを返します。
6	has 属性値がnull以外の値または未定義の値で定義されている場合、trueを返します。
7	unset バックボーンモデルから属性を削除します。
8	clear バックボーンモデルからid属性を含むすべての属性を削除します。
9	id モデルエンティティを一意に識別します。モデルエンティティは、モデルが作成または設定されるとき、またはモデルがサーバーに保存されるときに手動で設定される場合があります。
10	idAttribute idとして使用されるクラスのメンバーの名前を含むモデルの一意の識別子を定義します。
11	cid これは、クライアント上のモデルを一意に識別するBackboneによって自動生成されたクライアントIDです。
12	attributes 属性は、モデルのプロパティを定義します。
13	changed set（）*メソッドを使用して属性を設定した後、変更されたすべての属性を変更します。
14	defaults モデルにデフォルト値を設定します。つまり、ユーザーがデータを指定しない場合、モデルは空のプロパティになりません。
15	toJSON 属性のコピーをJSON文字列化のオブジェクトとして返します。
16	sync サーバーと通信し、モデルの状態を表すために使用されます。
17	fetch モデルの* sync（）*メソッドを委任することにより、サーバーからデータを受け入れます。
18	save Backboneが呼び出すたびにモデルを読み取り、保存する* sync（）*メソッドに委任することにより、モデルのデータを保存します。
19	destroy HTTPの「削除」要求を委任する Backbone.sync メソッドを使用して、サーバーからモデルを破棄または削除します。
20	validate 入力が無効な場合、指定されたエラーメッセージを返します。入力が有効な場合、何も指定せずに結果を表示します。
21	validationError 検証が失敗した場合、または invalid イベントがトリガーされた後、検証エラーが表示されます。
22	isValid validate（）*メソッドを使用してモデルの状態をチェックし、各属性の検証もチェックします。
23	url モデルのインスタンスに使用され、モデルのリソースがある場所へのURLを返します。
24	urlRoot モデルIDを使用してURLを生成することにより、url関数を有効にします。
25	parse 応答オブジェクトを通過してモデルのデータを返し、JSON形式でデータを表します。
26	clone モデルのディープコピーを作成したり、あるモデルオブジェクトを別のオブジェクトにコピーしたりするために使用されます。
27	hasChanged 最後の set 以降に属性が変更された場合、trueを返します。
28	isNew モデルが新規か既存かを決定します。
29	changedAttributes 最後の set 以降に変更されたモデルの属性を返します。属性がない場合はfalseになります。
30	previous 変更された属性の以前の値を決定します。
31	previousAttributes 最後の変更イベントの前のすべての属性の状態を返します。

アンダースコアメソッド

Backbone.Modelで使用される機能を提供する6つの Underscore.js メソッドがあります。

S.No.	Methods & Description
1	_.keys(object) オブジェクトの列挙可能なプロパティにアクセスするために使用されます。
2	_.values(object) オブジェクトのプロパティの値を取得するために使用されます。
3	_.pairs(object) キー値のペアの観点からオブジェクトのプロパティを記述します。
4	_.invert(object) オブジェクトのコピーを返します。キーは値になり、その逆も同様です。
5	*_.pick(object, keys)** オブジェクトのコピーを返し、取得するキーを示します。
6	*_.omit(object, keys)** オブジェクトのコピーを返し、どのキーを省略するかを示します。

BackboneJS-コレクション

コレクションは、モデルの順序付きセットです。バックボーンのコレクションクラスを拡張して、独自のコレクションを作成する必要があります。コレクション内のモデルでトリガーされるイベントは、コレクションでも直接トリガーされます。これにより、コレクション内のモデルの特定の属性に対する変更をリッスンできます。

次の表は、BackboneJS-Collectionを操作するために使用できるすべてのメソッドを示しています-

S.No.	Methods & Description
1	extend バックボーンのコレクションクラスを拡張してコレクションを作成します。
2	model モデルクラスを指定するには、コレクションクラスのモデルプロパティをオーバーライドする必要があります。
3	initialize モデルインスタンスが作成されると、コレクションの作成時に初期化関数を定義することで呼び出されます。
4	models コレクション内に作成されるモデルの配列。
5	toJSON コレクション内のJSON形式を使用して、モデルの属性のコピーを返します。
6	sync モデルの状態を表し、Backbone.syncを使用してコレクションの状態を表示します。
7	add コレクションにモデルまたはモデルの配列を追加します。
8	remove コレクションからモデルまたはモデルの配列を削除します。
9	reset コレクションをリセットし、モデルの新しい配列を入力するか、コレクション全体を空にします。
10	set モデル内のアイテムのセットでコレクションを更新するために使用されます。新しいモデルが見つかった場合、アイテムはそのモデルに追加されます。
11	get idor cid* を使用して、コレクションからモデルを取得するために使用されます。
12	at 指定されたインデックスを使用して、コレクションからモデルを取得します。
13	push モデルの配列を取得し、モデルをコレクションにプッシュするadd（）メソッドに似ています。
14	pop モデルの配列を取得し、コレクションからモデルを削除するremove（）メソッドに似ています。
15	unshift コレクションの先頭に指定されたモデルを追加します。
16	shift コレクションから最初のアイテムを削除します。
17	slice コレクションモデルの要素の浅いコピーを表示します。
18	length コレクション内のモデルの数をカウントします。
19	comparator コレクション内のアイテムをソートするために使用されます。
20	sort コレクション内のアイテムを並べ替え、コンパレータプロパティを使用してアイテムを並べ替えます。
21	pluck コレクション内のモデルから属性を取得します。
22	where コレクション内の一致した属性を使用してモデルを表示するために使用されます。
23	findWhere コレクション内の指定された属性に一致するモデルを返します。
24	url コレクションのインスタンスを作成し、リソースの場所を返します。
25	parse 応答オブジェクトを通過してコレクションのデータを返し、JSON形式でデータを表します。
26	clone 指定されたオブジェクトの浅いコピーを返します。
27	fetch syncメソッドを使用して、コレクション内のモデルからデータを抽出します。
28	create コレクションにモデルの新しいインスタンスを作成します。

アンダースコアメソッド

次の表は、 Backbone.Collection で使用される機能を提供する Underscore.js メソッドの一覧です。

S.No.	Methods & Description
1	_.each(list, iteratee, [context]) iteratee関数を使用して、コレクション内の各要素を繰り返します。
2	_.map(list, iteratee, [context]) 各値をマップし、 iteratee 関数を使用して新しい値の配列に表示します。
3	_.reduce(list, iteratee, memo, [context]) 値のリストを単一の値に縮小し、 inject および foldl とも呼ばれます。
4	_.reduceRight(list, iteratee, memo, [context]) これは reduce の適切な連想バージョンです。
5	_.find(list, predicate, [context]) 各値を検索し、述語またはテストに合格した最初の値を返します。
6	_.filter(list, predicate, [context]) 各値をフィルタリングし、述語またはテストに合格する値の配列を返します。
7	_.reject(list, predicate, [context]) 予測値を渡さないリスト内の拒否された要素を返します。
8	_.every(list, predicate, [context]) リスト内の要素が予測値を渡す場合、trueを返します。
9	_.some(list, predicate, [context]) リスト内の要素が予測値を渡す場合、trueを返します。
10	_.contains(list, value, [fromIndex]) リストに値が存在する場合、trueを返します。
11	_.invoke(list, methodName, ASTarguments) リスト内の各値に対して* methodName（）*を使用してメソッド名を呼び出します。
12	_.max(list, [iteratee], [context]) リスト内の最大値を指定します。
13	_.min(list, [iteratee], [context]) リスト内の最小値を指定します。
14	_.sortBy(list, [iteratee], [context]) リストでiterateeを使用して、ソートされた要素を昇順で返します。
15	_.groupBy(list, [iteratee], [context]) コレクションの値をセットに分割し、リストの iteratee を使用してグループ化します。
16	_.shuffle(list) リストのシャッフルされたコピーを返します。
17	_.toArray(list) リストの配列を定義します。
18	_.size(list) リスト内の値の数を定義します。
19	_.first(array, [n]) リスト内の配列の最初の要素を指定します。
20	_.initial(array, [n]) すべてを返しますが、リスト内の配列の最後のエントリを指定します。
21	_.last(array, [n]) リスト内の配列の最後の要素を指定します。
22	_.rest(array, [index]) 配列内の残りの要素を定義します。
23	_.without(array, ASTvalues) リストから削除されたすべてのインスタンスの値を返します。
24	_.indexOf(array, value, [isSorted]) 指定されたインデックスで見つかった場合は値を返し、見つからない場合は-1を返します。
25	_.indexOf(array, value, [fromIndex]) 配列内で最後に出現した値を返すか、見つからない場合は-1を返します。
26	_.isEmpty(object) リストに値がない場合、trueを返します。
27	_.chain(obj) ラップされたオブジェクトを返します。

BackboneJS-ルーター

ルーターは、クライアント側アプリケーションのルーティングに使用され、アプリケーションのオブジェクトのURL表現を定義します。 Webアプリケーションが、アプリ内の重要な場所にリンク可能、ブックマーク可能、共有可能なURLを提供する場合、ルーターが必要です。

次の表は、* BackboneJSを操作するために使用できるメソッドの一覧です-ルーター*-

S.No.	Methods & Description
1	extend バックボーンのルータークラスを拡張します。
2	routes アプリケーションオブジェクトのURL表現を定義します。
3	initialize ルーターのインスタンス化のための新しいコンストラクターを作成します。
4	route ルーターのルートを作成します。
5	navigate アプリケーションのURLを更新するために使用されます。
6	execute ルートが対応するコールバックと一致する場合に使用されます。

BackboneJS-歴史

履歴を追跡し、適切なルートに一致し、イベントを処理するコールバックを起動し、アプリケーションでルーティングを有効にします。

開始

これは、 BackboneJS-History を操作するために使用できる唯一の方法です。ルートのリッスンを開始し、ブックマーク可能なURLの履歴を管理します。

構文

Backbone.history.start(options)

パラメーター

*options* -オプションには、履歴で使用される *pushState* や *hashChange* などのパラメーターが含まれます。

例

<!DOCTYPE html>
<html>
   <head>
      <title>History Example</title>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
         type = "text/javascript"></script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
         type = "text/javascript"></script>
   </head>

   <script type = "text/javascript">
     //'Router' is a name of the router class
      var Router = Backbone.Router.extend ({

        //The 'routes' maps URLs with parameters to functions on your router
         routes: {
            "myroute" : "myFunc"
         },

        //'The function 'myFunc' defines the links for the route on the browser
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });

     //'router' is an instance of the Router
      var router = new Router();

     //Start listening to the routes and manages the history for bookmarkable URL's
      Backbone.history.start();
   </script>

   <body>

      <a href = "#route1">Route1 </a>
      <a href = "#route2">Route2 </a>
      <a href = "#route3">Route3 </a>
   </body>

</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを start ファイルに保存します。
このHTMLファイルをブラウザーで開きます。

注-上記の機能はアドレスバーに関連しています。したがって、ブラウザで上記のコードを開くと、次のように結果が表示されます。

スタート例

link：/backbonejs/src/history/start [デモはこちらをクリック]

BackboneJS-同期

モデルの状態をサーバーに永続化するために使用されます。

次の表は、 BackboneJS-Sync を操作するために使用できるメソッドの一覧です。

S.No.	Methods & Description
1	Backbone.sync モデルの状態をサーバーに永続化します。
2	Backbone.ajax カスタムajax関数を定義します。
3	Backbone.emulateHTTP WebサーバーがRESTまたはHTTPアプローチをサポートしていない場合は、Backbone.emulateHTTPをオンにします。
4	Backbone.emulateJSON メソッドを true に設定することにより、 application/json でエンコードされたリクエストを処理するために使用されます。

BackboneJS-ビュー

ビューは、「データモデルの外観」を反映するために使用されます。これらは、ユーザーに対するモデルのデータを表します。これらは、ユーザーにモデルのデータを表示する背後にあるアイデアを提供します。ユーザー入力イベントを処理し、イベントとメソッドをバインドし、モデルまたはコレクションをレンダリングし、ユーザーと対話します。

次の表は、 BackboneJS-Views を操作するために使用できるメソッドの一覧です。

S.No.	Methods & Description
1	extend Backbone.View* クラスを拡張して、カスタムビュークラスを作成します。
2	initialize 新しいキーワードを使用してビューをインスタンス化します。
3	el ビュー参照として使用する要素を定義します。
4	$el ビューの要素のjQueryオブジェクトを表します。
5	setElement 既存のDOM要素を別のDOM要素に指定します。
6	attributes ビュークラスのDOM要素属性として使用できます。
7	$(jQuery) これは、$関数を含むセレクターとして使用され、ビューの要素内でクエリを実行します。
8	template ビューのレンダリング中に、テンプレートはマークアップの再利用可能なコピーを作成し、インスタンスデータへのアクセスを提供します。
9	render テンプレートをレンダリングするためのロジックが含まれています。
10	remove DOMからビューを削除します。
11	delegateEvents イベントを処理するコールバックメソッドを使用して、指定されたDOM要素に要素をバインドします。
12	undelegateEvents ビューからデリゲートイベントを削除します。

BackboneJS-ユーティリティ

ユーティリティクラスは、バックボーンユーティリティの実装に使用される一連のメソッドを定義します。

次の表は、 BackboneJS-Utility を操作するために使用できるメソッドの一覧です。

S.No.

Methods & Description

1

Backbone.noConflict

Backboneオブジェクトの元の値を表示し、バックボーンへの参照を保存できます。

2

Backbone.$

Backboneが特定のオブジェクトをDOMライブラリとして使用できるようにします。

BackboneJS-便利なリソース

次のリソースには、BackboneJSに関する追加情報が含まれています。これについての詳細な知識を得るためにそれらを使用してください。

BackboneJSの便利なリンク

BackboneJS Wiki-BackboneJSのWikipediaリファレンス。
BackboneJS-BackboneJS公式サイト。

BackboneJSに関する便利な本

このページにサイトを登録するには、 contact @ finddevguides.com にメールを送信してください。

Backbonejs-quick-guide

目次

BackboneJS-概要

Backboneを使用する場合

特徴

BackboneJS-環境設定

公式WebサイトからUIライブラリをダウンロードする

依存関係

CDNからUIライブラリをダウンロードする

例

BackboneJS-アプリケーション

HTTPリクエスト

ルーター

View

イベント

モデル

コレクション

情報源

BackboneJS-イベント

組み込みイベントのカタログ

BackboneJS-モデル

アンダースコアメソッド

BackboneJS-コレクション

アンダースコアメソッド

BackboneJS-ルーター

BackboneJS-歴史

開始

構文

パラメーター

例

出力

BackboneJS-同期

BackboneJS-ビュー

BackboneJS-ユーティリティ

BackboneJS-便利なリソース

BackboneJSの便利なリンク

BackboneJSに関する便利な本