no versions found for ApplicationFrameworkReferences / CustomElement/listview_attach / en

ListView: attach()

ListView に追加する ViewLogic のコンストラクタを template プロパティに登録します。

構文

listView.attach(archetype) => ViewLogic[]

引数

  • archetype : ViewLogic

    ListView インスタンスの template プロパティに設定するコンストラクタを持った ViewLogic のインスタンスです。

返値: ViewLogic[]

detach() された ViewLogic の配列です。 何も detach() されなかった場合は空の配列を返します。

例外

  • TypeError
    • 引数 archetype が ViewLogic クラスのインスタンスでなかった場合

例

const listVl = new class ListVl extends ViewLogic {
    constructor() {
        super();
        this.loadContainer({
            text: `<alier-list-view id="list"></alier-list-view>`,
            id: "list",
        });
        this.relateElements(this.collectElements(this.container));
    }
};

const archetype = new class ListItemVl extends ViewLogic {
    constructor() {
        super();
        this.loadContainer({
            text: `
                <head><style>
                .hello {
                    --border-width: 2px;
                }
                .hello:nth-child(3n) {
                    background-color: lightblue;
                }
                .hello:nth-child(5n) {
                    border: var(--border-width) solid orange;
                }
                :not(.hello:nth-child(5n)) {
                    padding: var(--border-width);
                }
                </style></head>
                <body>
                <div id="hello" class="hello"><span>Hello!</span></div>
                </body>
                `,
            id: "hello",
        });
        this.relateElements(this.collectElements(this.container));
    }
};

Alier.View.attach(listVl);

//  listVl.container に archetype のコンストラクタ（ListItemVl）をテンプレートとして設定する
listVl.container.attach(archetype);

//  listVl に ListItemVl から生成した要素を 15 個追加する
listVl.container.splice(0, 0, 15);

解説

引数 archetype のコンストラクタを template プロパティに設定します。archetype のコンストラクタが template プロパティに設定されたコンストラクタと同一ならこの関数は何も行いません。

基底クラス AlierView の実装する attach() 関数と異なり、引数 archetype そのものは ListView に取り付けられず、従ってその host プロパティが変更されることも、messageHandler() 関数が呼び出されることもありません。

既に対象の ListView に ViewLogic のコンストラクタが取り付けられている場合、この関数の呼び出しの中で対象の ListView は detach() を実行します。