ListView: detach()
ListView に取り付けられている ViewLogic を取り外します。
構文
listView.detach() => ViewLogic[]返値: ViewLogic[]
呼び出し前に対象の ListView に取り付けられていた 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));
}
};
const prevVl = Alier.View.attach(listVl);
// listVl.container に archetype のコンストラクタ（ListItemVl）をテンプレートとして設定する
listVl.container.attach(archetype);
// listVl に ListItemVl から生成した要素を 15 個追加する
listVl.container.splice(0, 0, 15);
const detachedVls = listVl.container.detach();
console.log(detachedVls.length === 15);
// ==> true
console.log(detachedVls.every(vl => (vl instanceof archetype.constructor)));
// ==> true
console.log(listVl.container.template == null);
// ==> true
// 画面を元に戻す
Alier.View.attach(prevVl);解説
ListView にViewLogic の配列が取り付けられている場合、それらを取り外します。また、template プロパティにコンストラクタが設定されている場合、値を null に変更します。
template プロパティが設定されていない場合、この関数は何も行いません。