ViewLogic: loadContainerSync()

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

構文

ViewLogic.loadContainerSync({ text }) => Element
ViewLogic.loadContainerSync({ text, id }) => Element
ViewLogic.loadContainerSync({ file }) => Element
ViewLogic.loadContainerSync({ file, id }) => Element

引数

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

• text: string （省略可）

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

• file: string （省略可）

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

• id: string （省略可）

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

返値: Element

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

例外

• TypeError
  • 引数が text、file のうち１つも持っていなかった場合
  • 引数プロパティ text が string でも nullish でもなかった場合
  • 引数プロパティ file が string でも nullish でもなかった場合
  • 引数プロパティ id が string でも nullish でもなかった場合
• ReferenceError
  • 引数プロパティ id に一致する id 属性値を持つ要素が読み込まれた HTML に存在しなかった場合

例

const { ViewLogic } = await Alier.import("/alier_sys/ViewLogic.js");

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

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

解説

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

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