ViewLogic: setContainer()

対象の ViewLogic のコンテナを与えられた Element で置き換えます。

この関数は引数 newContainer がプロミスでなければ同期関数、プロミスであれば非同期関数です。

構文

ViewLogic.setContainer(newContainer) => Element | null | Promise<Element | null>

引数

• newContainer: Element | Promise<Element>

  新たに設定するコンテナまたは新たに設定するコンテナを解決時に与えるプロミスです。

返値: Element | null | Promise<(Element | null)>

引数 newContainer がプロミスかどうかで返値が変わります：

• プロミスでない場合

  直前にコンテナとして設定されていた Element、または何も設定されていなかったら null です。

• プロミスだった場合

  直前にコンテナとして設定されていた Element または null を返すプロミスです。

例外

• TypeError
  • newContainer が Element か Promise<Element> のいずれでもなかった場合

例

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

const vl = new class extends ViewLogic {
    async messageHandler(msg) {
        msg.deliver({
            vl$containerUpdated: (msg) => {
                const { target, oldStyles, oldContainer } = msg.param;
                console.log("container updated!", target, oldStyles, oldContainer);
            },
        });
    }
};

const html     = `<div id="container">${
    `<input id="name-field" type="text" value="Jon" data-ui-component data-active-events="input"></input>`
}</div>`;
const container = ViewLogic.parseHtmlToContainer(html, "container");

//  Alier.View に vl のコンテナを反映
Alier.View.attach(vl);

//  Element を代入;  Alier.View の表示内容が代入した container に切り替わる
vl.setContainer(container);

const another_html     = `<div id="another-container">${
    `<input id="name-field" type="text" value="Chris" data-ui-component data-active-events="input"></input>`
}</div>`;
const another_container = ViewLogic.parseHtmlToContainer(another_html, "another-container");

//  Promise<Element> を代入; 2 秒後に setTimeout() のコールバックが呼び出されて解決する
//  解決後に Alier.View の表示内容が another_container の内容に切り替わる
vl.setContainer(new Promise((resolve) => {
    setTimeout(() => resolve(another_container), 2000);
}));

解説

引数 newContainer としてプロミスを渡した場合、解決時にプロミスの結果が container に設定されます。

ただし、もしプロミスの解決を待たずに再び同じ ViewLogic を対象としてこの関数が呼び出された場合、その後でプロミスが解決されたとしても対象の ViewLogic のプロパティ container は変更されません。プロミスを引数としてこの関数が複数回呼び出された場合、最後に渡されたプロミスが container を更新します。

引数 newContainer から得られた要素がスタイル定義に関する要素 (<style>, <link>) を含む場合、それらのスタイル定義要素は親要素のノードツリーからすべて取り除かれ、プロパティ styles の子要素に加えられます。

この関数の呼び出し後、id = "vl$containerUpdated" のメッセージが対象の ViewLogic 自身に対して post() されます。このメッセージは通常、ViewLogic の初期化完了時の処理を行う契機として利用され、また消費されなければいけません。