Backbonejs-quick-guide
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/を開くと、次のようなスクリーンショットが表示されます-
ご覧のとおり、このライブラリのダウンロードには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 という名前で保存します。 これをブラウザで開くと、画面に次のテキストが表示されます。
BackboneJS-アプリケーション
BackboneJSは、ビジネスロジックとユーザーインターフェイスロジックの分離を可能にする構造をWebアプリケーションに提供します。 この章では、ユーザーインターフェイスを実装するためのBackboneJSアプリケーションのアーキテクチャスタイルについて説明します。 次の図は、BackboneJSのアーキテクチャを示しています-
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 |
イベントをオブジェクトにバインドし、イベントが発生するたびにコールバックを実行します。 |
2 |
オブジェクトからコールバック関数またはすべてのイベントを削除します。 |
3 |
指定されたイベントのコールバック関数を呼び出します。 |
4 |
独自のバックボーンモデルを作成しながら、backbone.Modelクラスを拡張します。 |
5 |
あるオブジェクトに別のオブジェクトのイベントをリッスンするよう通知します。 |
6 |
他のオブジェクトのイベントのリッスンを停止するために使用できます。 |
7 |
コールバック関数が削除される前に一度だけ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 |
独自のバックボーンモデルを作成しながら、 backbone.Model クラスを拡張します。 |
2 |
モデルインスタンスが作成されると、クラスのコンストラクターが呼び出され、モデルの作成時に初期化関数を定義することで呼び出されます。 |
3 |
モデルの属性の値を取得します。 |
4 |
モデルの属性の値を設定します。 |
5 |
これは get 関数に似ていますが、モデルの属性のHTMLエスケープバージョンを返します。 |
6 |
属性値がnull以外の値または未定義の値で定義されている場合、trueを返します。 |
7 |
バックボーンモデルから属性を削除します。 |
8 |
バックボーンモデルからid属性を含むすべての属性を削除します。 |
9 |
モデルエンティティを一意に識別します。モデルエンティティは、モデルが作成または設定されるとき、またはモデルがサーバーに保存されるときに手動で設定される場合があります。 |
10 |
idとして使用されるクラスのメンバーの名前を含むモデルの一意の識別子を定義します。 |
11 |
これは、クライアント上のモデルを一意に識別するBackboneによって自動生成されたクライアントIDです。 |
12 |
属性は、モデルのプロパティを定義します。 |
13 |
|
14 |
モデルにデフォルト値を設定します。つまり、ユーザーがデータを指定しない場合、モデルは空のプロパティになりません。 |
15 |
属性のコピーをJSON文字列化のオブジェクトとして返します。 |
16 |
サーバーと通信し、モデルの状態を表すために使用されます。 |
17 |
モデルの* sync()*メソッドを委任することにより、サーバーからデータを受け入れます。 |
18 |
Backboneが呼び出すたびにモデルを読み取り、保存する* sync()*メソッドに委任することにより、モデルのデータを保存します。 |
19 |
HTTPの「削除」要求を委任する Backbone.sync メソッドを使用して、サーバーからモデルを破棄または削除します。 |
20 |
入力が無効な場合、指定されたエラーメッセージを返します。入力が有効な場合、何も指定せずに結果を表示します。 |
21 |
検証が失敗した場合、または invalid イベントがトリガーされた後、検証エラーが表示されます。 |
22 |
|
23 |
モデルのインスタンスに使用され、モデルのリソースがある場所へのURLを返します。 |
24 |
モデルIDを使用してURLを生成することにより、url関数を有効にします。 |
25 |
応答オブジェクトを通過してモデルのデータを返し、JSON形式でデータを表します。 |
26 |
モデルのディープコピーを作成したり、あるモデルオブジェクトを別のオブジェクトにコピーしたりするために使用されます。 |
27 |
最後の set 以降に属性が変更された場合、trueを返します。 |
28 |
モデルが新規か既存かを決定します。 |
29 |
最後の set 以降に変更されたモデルの属性を返します。属性がない場合はfalseになります。 |
30 |
変更された属性の以前の値を決定します。 |
31 |
最後の変更イベントの前のすべての属性の状態を返します。 |
アンダースコアメソッド
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 |
バックボーンのコレクションクラスを拡張してコレクションを作成します。 |
2 |
モデルクラスを指定するには、コレクションクラスのモデルプロパティをオーバーライドする必要があります。 |
3 |
モデルインスタンスが作成されると、コレクションの作成時に初期化関数を定義することで呼び出されます。 |
4 |
コレクション内に作成されるモデルの配列。 |
5 |
コレクション内のJSON形式を使用して、モデルの属性のコピーを返します。 |
6 |
モデルの状態を表し、Backbone.syncを使用してコレクションの状態を表示します。 |
7 |
コレクションにモデルまたはモデルの配列を追加します。 |
8 |
コレクションからモデルまたはモデルの配列を削除します。 |
9 |
コレクションをリセットし、モデルの新しい配列を入力するか、コレクション全体を空にします。 |
10 |
モデル内のアイテムのセットでコレクションを更新するために使用されます。 新しいモデルが見つかった場合、アイテムはそのモデルに追加されます。 |
11 |
|
12 |
指定されたインデックスを使用して、コレクションからモデルを取得します。 |
13 |
モデルの配列を取得し、モデルをコレクションにプッシュするadd()メソッドに似ています。 |
14 |
モデルの配列を取得し、コレクションからモデルを削除するremove()メソッドに似ています。 |
15 |
コレクションの先頭に指定されたモデルを追加します。 |
16 |
コレクションから最初のアイテムを削除します。 |
17 |
コレクションモデルの要素の浅いコピーを表示します。 |
18 |
コレクション内のモデルの数をカウントします。 |
19 |
コレクション内のアイテムをソートするために使用されます。 |
20 |
コレクション内のアイテムを並べ替え、コンパレータプロパティを使用してアイテムを並べ替えます。 |
21 |
コレクション内のモデルから属性を取得します。 |
22 |
コレクション内の一致した属性を使用してモデルを表示するために使用されます。 |
23 |
コレクション内の指定された属性に一致するモデルを返します。 |
24 |
コレクションのインスタンスを作成し、リソースの場所を返します。 |
25 |
応答オブジェクトを通過してコレクションのデータを返し、JSON形式でデータを表します。 |
26 |
指定されたオブジェクトの浅いコピーを返します。 |
27 |
syncメソッドを使用して、コレクション内のモデルからデータを抽出します。 |
28 |
コレクションにモデルの新しいインスタンスを作成します。 |
アンダースコアメソッド
次の表は、 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 |
バックボーンのルータークラスを拡張します。 |
2 |
アプリケーションオブジェクトのURL表現を定義します。 |
3 |
ルーターのインスタンス化のための新しいコンストラクターを作成します。 |
4 |
ルーターのルートを作成します。 |
5 |
アプリケーションのURLを更新するために使用されます。 |
6 |
ルートが対応するコールバックと一致する場合に使用されます。 |
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 |
モデルの状態をサーバーに永続化します。 |
2 |
Backbone.ajax カスタムajax関数を定義します。 |
3 |
WebサーバーがRESTまたはHTTPアプローチをサポートしていない場合は、Backbone.emulateHTTPをオンにします。 |
4 |
メソッドを true に設定することにより、 application/json でエンコードされたリクエストを処理するために使用されます。 |
BackboneJS-ビュー
ビューは、「データモデルの外観」を反映するために使用されます。 これらは、ユーザーに対するモデルのデータを表します。 これらは、ユーザーにモデルのデータを表示する背後にあるアイデアを提供します。 ユーザー入力イベントを処理し、イベントとメソッドをバインドし、モデルまたはコレクションをレンダリングし、ユーザーと対話します。
次の表は、 BackboneJS-Views を操作するために使用できるメソッドの一覧です。
S.No. | Methods & Description |
---|---|
1 |
|
2 |
新しいキーワードを使用してビューをインスタンス化します。 |
3 |
ビュー参照として使用する要素を定義します。 |
4 |
ビューの要素のjQueryオブジェクトを表します。 |
5 |
既存のDOM要素を別のDOM要素に指定します。 |
6 |
ビュークラスのDOM要素属性として使用できます。 |
7 |
これは、$関数を含むセレクターとして使用され、ビューの要素内でクエリを実行します。 |
8 |
ビューのレンダリング中に、テンプレートはマークアップの再利用可能なコピーを作成し、インスタンスデータへのアクセスを提供します。 |
9 |
テンプレートをレンダリングするためのロジックが含まれています。 |
10 |
DOMからビューを削除します。 |
11 |
イベントを処理するコールバックメソッドを使用して、指定されたDOM要素に要素をバインドします。 |
12 |
ビューからデリゲートイベントを削除します。 |
BackboneJS-ユーティリティ
ユーティリティクラスは、バックボーンユーティリティの実装に使用される一連のメソッドを定義します。
次の表は、 BackboneJS-Utility を操作するために使用できるメソッドの一覧です。
S.No. | Methods & Description |
---|---|
1 |
Backboneオブジェクトの元の値を表示し、バックボーンへの参照を保存できます。 |
2 |
Backboneが特定のオブジェクトをDOMライブラリとして使用できるようにします。 |
BackboneJS-便利なリソース
次のリソースには、BackboneJSに関する追加情報が含まれています。 これについての詳細な知識を得るためにそれらを使用してください。
BackboneJSの便利なリンク
- BackboneJS Wiki-BackboneJSのWikipediaリファレンス。
- BackboneJS-BackboneJS公式サイト。
BackboneJSに関する便利な本
このページにサイトを登録するには、 contact @ finddevguides.com にメールを送信してください。