Backbone インタラクション

注意

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

Backbone は、Web アプリケーションで MVC アーキテクチャを作成およびフォローするのに役立つライブラリです。 Backbone の基本的な考え方は、インターフェイスをモデルに基づいた論理ビューに編成することです。モデルが変更された場合に、ページを再描画する必要なく、それぞれを個別に更新できます。 Backbone について詳しくは、https://backbonejs.org を参照してください。

いくつかの主要な概念を次に示します。

Backbone モデル：データと、このデータに関連付けられたほとんどのロジックが含まれています。

Backbone ビュー：対応するモデルの状態を表示するために使用します。Backbone ビューは実際にはコントローラと同じように動作します。ユーザーがクリックするなどのユーザーインターフェイスイベントやモデルイベント（データが変更されたなど）をリッスンし、ユーザーインターフェイスを適宜変更します。

HTML テンプレート：モデルによって生成されたプレースホルダーがある、ラッパーテンプレート。

AEM Forms ワークスペース：複数の個別コンポーネントが含まれます。各コンポーネント：

  • 単一の論理ユーザーインターフェイス要素を表します。
  • 類似したコンポーネントのコレクションにすることができます。
  • Backbone モデル、Backbone ビュー、およびHTMLテンプレートで構成されます。
  • サービスへの参照が含まれます。
  • 必要なユーティリティへの参照を含みます。

コンポーネントを初期化すると、次のオブジェクトが作成されます。

  • コンポーネントの Backbone モデルの新しいインスタンスが作成されます。 モデルにサービスが挿入されます。
  • Backbone ビューの新しいインスタンスが作成されます。
  • 対応するモデル、HTMLテンプレート、ユーティリティのインスタンスがビューに挿入されます。

Backbone ビューには、対応するハンドラとのユーザーインターフェイスインタラクションによって発生する可能性のある様々なイベントをマッピングするイベントマップがあります。 このマッピングは、コンポーネントが初期化されると開始されます。

ビューが初期化されると、ビューは対応するモデルを呼び出して、サーバからデータを取得します。 ビューによって要求されたすべてのデータが使用可能になると、ビューはデータを HTML テンプレートによって指定された形式にレンダリングします。複数のビューで、通信用に同じモデルを共有することが可能です。

例：

  1. ユーザーがタスクリスト内のタスクテンプレートをクリックします。
  2. タスクビューは、クリックをリッスンし、タスクモデルでレンダリング関数を呼び出します。
  3. その後タスクモデルは、AEM Forms サーバーとのすべての通信で共通のポイントであるサービスを呼び出します。
  4. サービスクラスは、レンダリングメソッドの AEM Forms REST エンドポイントを Ajax 経由で呼び出します。
  5. この Ajax 呼び出しの成功コールバックは、タスクモデルで定義されます。
  6. タスクモデルは、レンダリング呼び出しが完了した通知として Backbone イベントを発生させます。
  7. 別のビューであるタスクの詳細ビューは、タスクモデルからこのイベントをリッスンします。
  8. 次に、タスクの詳細ビューは、タスクの詳細テンプレートを変更し、レンダリングされたタスク（フォーム、詳細、添付ファイル、メモなど）をユーザーに表示します。

このページ