ProtoViewLogic: getRelatedElements()

対象の ProtoViewLogic に関連付けられている（relateElements() 参照）Element を取得します。

構文

protoViewLogic.getRelatedElements() => object

返値: object

対象の ProtoViewLogic に関連付けられた Element または Array<Element> をプロパティに持つオブジェクトです。

各プロパティ名は対象の ProtoViewLogic が各 Element または Array<Element> を参照するプロパティと同名です。 例えば protoViewLogic.foo および protoViewLogic.bar にそれぞれ子の Element と Array<Element> が設定されている場合、ProtoViewLogic.getRelatedElements() の返値は { foo: Element, bar: Array<Element> } となります。

例

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

console.group("Example of ProtoViewLogic.getRelatedElements()");

const vl  = new ProtoViewLogic;
const paragraph = document.createElement("p");
const buttons   = [
    document.createElement("button"),
    document.createElement("button"),
    document.createElement("button"),
];

//  Element の初期化
paragraph.textContent = "A bunch of sentences may or mayn't be a paragraph.";
for (const i of buttons.keys()) {
    const button = buttons[i];
    button.type                 = "button";
    button.value                = String(i);
    button.textContent          = `button-${i}`;
    button.dataset.activeEvents = "click";
}

//  何も関連付けられていない状態で getRelatedElements() を呼ぶ。
//  これは空のオブジェクトを返す。
console.log(vl.getRelatedElements());
//  ==> {}

//  paragraph と buttons を vl に関連付ける
vl.relateElements({ paragraph, buttons });

//  Element が関連付けられた状態で getRelatedElements() を呼ぶ。
//  これは paragraph, buttons を含むオブジェクトを返す。
console.log(vl.getRelatedElements());
//  ==> { paragraph: HTMLParagraphElement, buttons: HTMLButtonArray<Element> }

//  メッセージ監視用の ProtoViewLogic
const watcher = new class Watcher extends ProtoViewLogic {
    async messageHandler(msg) {
        console.group(`${msg.id}+${msg.code}`);
        console.log("%cmsg.id          :", "font-weight: bold; font-family: monospace;", msg.id);
        console.log("%cmsg.code        :", "font-weight: bold; font-family: monospace;", msg.code);
        console.log("%cmsg.origin      :", "font-weight: bold; font-family: monospace;", msg.origin);
        console.log("%cmsg.target      :", "font-weight: bold; font-family: monospace;", msg.target);
        console.log("%cmsg.param       :", "font-weight: bold; font-family: monospace;", msg.param);
        console.log("%cmsg.param?.value:", "font-weight: bold; font-family: monospace;", msg.param?.value);
        console.log("%cmsg.param?.event:", "font-weight: bold; font-family: monospace;", msg.param?.event);
        console.groupEnd();
    }
};

//  vl を watcher の子にする。
//  watcher の messageHandler() は vl が処理しなかったメッセージを受け取るようになる。
watcher.relateViewLogics({ vl });

//  関連付けられた要素を変数に保持する
const element_map = vl.getRelatedElements();

//  すべての要素をクリックする。
//  ==>  watcher がすべてのクリックイベントを報告する。
for (const k in element_map) {
    const element_or_array = element_map[k];
    if (element_or_array instanceof Element) {
        element_or_array.click();
    } else {
        for (const element of element_or_array) {
            element.click();
        }
    }
}

console.groupEnd();

解説

対象の ProtoViewLogic から、それに関連付けられた Element またはその配列を参照するプロパティを抽出し、null-prototype オブジェクトとして返します。

この関数は例えば、for-in ループや Object.entries() などを利用してそれぞれの関連付けられた Element に対する処理を行うために利用できます。