ProtoViewLogic

概要


ProtoViewLogicViewLogic の基底クラスです。

ProtoViewLogic は、ViewLogic が持つ機能のうち、コンテナに関連する部分以外の機能を持っています。 つまり、メッセージの制御に関する機能は ProtoViewLogic の機能として実装されています。

このクラスに関する全般的な説明は ViewLogic モジュール を参照してください

メソッド


createUiComponents()

  • 与えられた一連の記述子に基づいて Element を生成します。

createElement()

  • 与えられた記述子に基づいて Element を生成します。

getRelationshipOf()

  • 与えられた要素について、ProtoViewLogic との関係性を取得します。

message()

  • ProtoViewLogic へ送るメッセージを生成します。

post()

  • 受け取ったメッセージを処理します。

broadcast()

  • 対象の ProtoViewLogic インスタンスの子孫へ同一メッセージを送ります。

getRelatedViewLogics()

  • 対象の ProtoViewLogic と親子関係を結んでいる(relateViewLogics() 参照)ProtoViewLogic を取得します。

relateViewLogics()

  • 与えられた ProtoViewLogic を子とする親子関係を結びます。

disrelateViewLogics()

  • 与えられた ProtoViewLogic を子とする親子関係を解消します。

getRelatedElements()

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

relateElements()

  • HTML 要素を対象の ProtoViewLogic に関連づけます。関連付けられた要素は自身に対するイベントをその ProtoViewLogic へ通知するようになります。

disrelateElements()

  • 引数により指定された HTML 要素と対象の ProtoViewLogic の関連づけを解消します。

addActiveEvents()

  • メソッド relateElements() によって ProtoViewLogic に関連付けられた HTML 要素に対して、指定した種別のイベント通知を有効にします。

removeActiveEvents()

  • メソッド relateElements() によって ProtoViewLogic に関連付けられた HTML 要素に対して、指定した種別のイベント通知を無効にします。

defineUiComponents()

  • 呼び出し先の ProtoViewLogic に対して Element を定義して関連付けます(relateElements() も参照)。

collectAttributes()

  • メソッド relateElements() で関連付けられた HTML 要素から指定のキーの属性値を収集します。

curateValues()

  • 関連付けられた要素を特徴づけるプロパティの値を収集します。

reflectValues()

  • 関連付けられた要素を特徴づけるプロパティの値を変更します。

collectElements()

  • 対象の DOM 要素から特定条件を満たす要素を収集します。

messageHandler()

onDataBinding()

  • ObservableObject とデータ同期のために結合した際に呼び出されるコールバック関数です。

プロパティ


name

このプロパティは読み取り専用です。

ProtoViewLogic インスタンスの名前です。

string | null

詳細

namerelateViewLogics() を実行したときに引数に渡したオブジェクトのプロパティ名で設定されます。設定してなければ null となります。

name は親の ProtoViewLogic から子の ProtoViewLogic を参照するために使用されます。例えば、子の name"foo" だった場合、親の ProtoViewLogicfoo という名前のプロパティを持ち、そのプロパティを通じて子の ProtoViewLogic にアクセスできます。

ProtoViewLogic のインスタンス vl について、vl.namenull でない場合、vl.parent[vl.name]vl 自身または vl 自信を成分に持つ配列を指します。

vl.namenull であれば vl.parentnull です。

このプロパティは読み取り専用です。

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

const   vlParent = new ProtoViewLogic(),
        vlChild  = new ProtoViewLogic()
;

console.log(`(vlChild.name)                 ==> ${vlChild.name}`);
// ==> null; vlChild に名前は設定されていない
console.log(`(vlChild.parent)               ==> ${vlChild.parent}`);
// ==> null; vlChild に親は設定されていない

// vlParent に vlChild を "foo" という名前で関連付ける。

vlParent.relateViewLogics({ foo: vlChild });

onsole.log(`(vlChild.name)                  ==> ${vlChild.name}`);
// ==> "foo"; vlChild の名前として relateViewLogics の引数として渡したオブジェクトのプロパティ名が使用される。
console.log(`(vlChild.parent === vlParent) ==> ${vlChild.parent === vlParent}`);
// ==> true; vlChild の親として vlParent が設定されている
console.log(`(vlChild === vlParent.foo)    ==> ${vlChild === vlParent.foo}`);
// ==> true; vlParent の子として vlChild が設定されている

parent

このプロパティは読み取り専用です。

親の ProtoViewLogic インスタンスです。

ProtoViewLogic | null

詳細

relateViewLogics() で親子関係が設定されている場合は親の ProtoViewLogic への参照、未設定であれば null となります。

parent を持つ ProtoViewLogic に対して post() が呼び出され、その ProtoViewLogic 自身でメッセージを処理しなかった場合、未処理のメッセージは parentpost() されます。

既定では、親が変更されるとメッセージ { id: "vl$connectionChanged" } が通知されます。変更に対して何らかの処理を加えたい場合は messageHandler() をオーバライドし、メッセージ msg = { id: "vl$connectionChanged" } を受け取れるようにしてください。

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

const vlParent = new class Foo extends ProtoViewLogic {
    async messageHandler(msg) {
        msg.deliver({
            vl$connectionChanged: (msg) => {
                console.log(`My name used to be ${msg.param.oldName}, but now my name is ${msg.param.newName}`);
            },
            greet: (msg) => {
                console.log("Hi. Your speak English is quite good. How'd you learn it?");
            }
        });
    }
};

const vlChild  = new class Bar extends ProtoViewLogic {
    async messageHandler(msg) {
        msg.deliver({
            vl$connectionChanged: (msg) => {
                console.log(`私の名前はかつて ${msg.param.oldName} でしたが、今は ${msg.param.newName} と言います`);
            },
            aisatsu: (msg) => {
                console.log("こんにちは! 日本語、お上手ですね。どうやって勉強したんですか?");
            }
        });
    }
};

const postman         = new ProtoViewLogic();
const vl_grand_parent = new ProtoViewLogic();

vlParent.relateViewLogics({ foo: vlChild });
console.log(vlChild.parent === vlParent);
// ==> true; vlChild の親として vlParent が設定されている

vl_grand_parent.relativeViewLogics({ foo: vlParent });
console.log(`(vlParent.parent === vl_grand_parent) ==> ${vlParent.parent === vl_grand_parent}`);
// ==> true; vlParent の親として vl_grand_parent が設定されている

//  postman から vlChild へ id="aisatsu" のメッセージを送る:
await vlChild.post(postman.message("aisatsu", null, null));
// ==> "こんにちは! ..."; vlChild の messageHandler() から aisatsu に設定したアロー関数が実行される。

//  postman から vlParent へ id="greet" のメッセージを送る:
await vlParent.post(postman.message("greet", null, null));
// ==> "Hi. You speak ..."; vlParent の messageHandler() から greet に設定したアロー関数が実行される。

//  postman から vlChild へ id="greet" のメッセージを送る:
await vlChild.post(postman.message("greet", null, null));
// ==> "Hi. You speak ..."; vlChild で id = "greet" のメッセージを処理できないため、vlParent にメッセージ処理が移譲される。