Backbone インタラクション

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. タスクモデルはバックボーンイベントをレンダリング呼び出しが完了した通知として発生させます。
  7. 別のビューであるタスクの詳細ビューは、タスクモデルからこのイベントをリッスンします。
  8. タスクの詳細ビューはその後、タスクの詳細テンプレートを変更してレンダリングされたタスク（フォーム、詳細、添付ファイル、メモなど）をユーザーに表示します。

このページ