add mountView utility to handle error handling on mount
and use it where errorToDOM is used currently for catching mount errors
This commit is contained in:
parent
ff370d03db
commit
dde26da5a6
3 changed files with 33 additions and 23 deletions
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import {el} from "./html.js";
|
||||
import {errorToDOM} from "./error.js";
|
||||
import {mountView} from "./utils.js";
|
||||
|
||||
function insertAt(parentNode, idx, childNode) {
|
||||
const isLast = idx === parentNode.childElementCount;
|
||||
|
@ -108,12 +108,7 @@ export class ListView {
|
|||
for (let item of this._list) {
|
||||
const child = this._childCreator(item);
|
||||
this._childInstances.push(child);
|
||||
try {
|
||||
const childDomNode = child.mount(this._mountArgs);
|
||||
fragment.appendChild(childDomNode);
|
||||
} catch (err) {
|
||||
fragment.appendChild(errorToDOM(err));
|
||||
}
|
||||
fragment.appendChild(mountView(child, this._mountArgs));
|
||||
}
|
||||
this._root.appendChild(fragment);
|
||||
}
|
||||
|
@ -122,13 +117,7 @@ export class ListView {
|
|||
this.onBeforeListChanged();
|
||||
const child = this._childCreator(value);
|
||||
this._childInstances.splice(idx, 0, child);
|
||||
let node;
|
||||
try {
|
||||
node = child.mount(this._mountArgs);
|
||||
} catch (err) {
|
||||
node = errorToDOM(err);
|
||||
}
|
||||
insertAt(this._root, idx, node);
|
||||
insertAt(this._root, idx, mountView(child, this._mountArgs));
|
||||
this.onListChanged();
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html.js";
|
||||
import {errorToDOM} from "./error.js";
|
||||
import {mountView} from "./utils.js";
|
||||
import {BaseUpdateView} from "./BaseUpdateView.js";
|
||||
|
||||
function objHasFns(obj) {
|
||||
|
@ -282,17 +282,11 @@ class TemplateBuilder {
|
|||
return node;
|
||||
}
|
||||
|
||||
// this insert a view, and is not a view factory for `if`, so returns the root element to insert in the template
|
||||
// this inserts a view, and is not a view factory for `if`, so returns the root element to insert in the template
|
||||
// you should not call t.view() and not use the result (e.g. attach the result to the template DOM tree).
|
||||
view(view, mountOptions = undefined) {
|
||||
let root;
|
||||
try {
|
||||
root = view.mount(mountOptions);
|
||||
} catch (err) {
|
||||
return errorToDOM(err);
|
||||
}
|
||||
this._templateView.addSubView(view);
|
||||
return root;
|
||||
return mountView(view, mountOptions);
|
||||
}
|
||||
|
||||
// map a value to a view, every time the value changes
|
||||
|
|
27
src/platform/web/ui/general/utils.js
Normal file
27
src/platform/web/ui/general/utils.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {errorToDOM} from "./error.js";
|
||||
|
||||
export function mountView(view, mountArgs = undefined) {
|
||||
let node;
|
||||
try {
|
||||
node = view.mount(mountArgs);
|
||||
} catch (err) {
|
||||
node = errorToDOM(err);
|
||||
}
|
||||
return node;
|
||||
}
|
Reference in a new issue