Backbone インタラクション

Backbone は、Web アプリケーションで MVC アーキテクチャの作成および追随に役立つライブラリです。Backbone の基本概念は、ユーザーのインターフェイスをモデルによって裏付けられたロジックビューに編成し、モデルを変更する場合はページを作り直すことなく、個々に更新できるようにすることです。Backboneの詳細については、https://backbonejs.orgを参照してください。

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

Backbone modelデータと、このデータに関連するほとんどのロジックが含まれます。

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

HTML テンプレートモデルによって入力されたプレースホルダを持つラッパーテンプレート。

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

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

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

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

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

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

例：

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

このページ