ViewLogic: loadContainer()

テキストやファイルからコンテナを読み込みます。

この関数は非同期関数です。

構文

ViewLogic.loadContainer({ text }) => Element
ViewLogic.loadContainer({ text, id }) => Element
ViewLogic.loadContainer({ file }) => Promise<Element>
ViewLogic.loadContainer({ file, id }) => Promise<Element>
ViewLogic.loadContainer({ url }) => Promise<Element>
ViewLogic.loadContainer({ url, id }) => Promise<Element>

引数

次のプロパティを持つオブジェクトを受け取ります。引数として text、file、url のうち１つを持つ必要があります。複数指定した場合は text、file、url の優先度でコンテナを読み込みます。

• text: string （省略可）

  コンテナを記述した HTML 文字列です。

• file: string （省略可）

  コンテナを記述した HTML ファイルへのパスです。

• url: string | URL （省略可）

  コンテナを記述した HTML を取得するための HTTP URL 文字列または URL オブジェクトです。

• id: string （省略可）

  読み込みたいコンテナの id 属性です。もし指定されなければ <alier-container> を読み込みます。

返値: Element | Promise<Element>

引数プロパティによって返値が異なります。

• 引数が text だった場合

  新たに設定された container です。

• 引数が file または url だった場合

  新たに設定された container の値を解決時に与えるプロミスです。

例外

• TypeError
  • 引数が text、file、url のうち１つも持っていなかった場合
  • 引数プロパティ text が string でも nullish でもなかった場合
  • 引数プロパティ file が string でも nullish でもなかった場合
  • 引数プロパティ url が string でも nullish でもなかった場合
  • 引数プロパティ url が "http:" または "https:" から始まるが、URL へ変換できない文字列だった場合
  • 引数プロパティ id が string でも nullish でもなかった場合
• ReferenceError
  • 引数プロパティ id に一致する id 属性値を持つ要素が読み込まれた HTML に存在しなかった場合

例

import { ViewLogic } from "/alier_sys/ViewLogic.js";

//  ViewLogic のインスタンスを生成する
const vl = new class Example extends ViewLogic {
    constructor() {
        super();
        //  1.  loadContainer() は解決時に example.html から取得した id="example-id" の要素を返す
        //  2.  collectElements() は引数の Promise の解決時に、与えられた要素から data-ui-component カスタムデータ属性と id 属性を持つ要素を抽出して、
        //      id を lowerCamel 変換した名前をプロパティ名とし、その値を要素自身への参照とするオブジェクトとして返却する。
        //  3.  relateElements() は引数の Promise の解決時に、与えられたオブジェクトのプロパティを対象の ViewLogic に設定する。
        this.relateElements(this.collectElements(this.loadContainer({ file: "example.html", id: "example-id" })));
    }
    async messageHandler(msg) {
        msg.deliver({
            vl$containerUpdated: (msg) => {
                //  loadContainer() 呼び出し後、対象の ViewLogic の container が更新された際にこのメッセージが送信される。

                const { target, oldStyles, oldContainer } = msg.param;
                console.log("container updated!", target, oldStyles, oldContainer);
            },
        });
    }
};

解説

読み込まれたファイルの内容は parseHtmlToContainer() によってパースされます。

パース結果が対象の ViewLogic のプロパティ container に設定されます。container の設定は setContainer() によって行われます。