Moved properties over to a object model and added a resetProperties function that will reset properties to their default values. Fixed a few bugs and cleaned up the code a little more.

This commit is contained in:
2020-07-29 11:21:02 -07:00
parent 374defdc82
commit 274e09a59b
4 changed files with 147 additions and 50 deletions

View File

@ -1,23 +1,18 @@
import { IgniteElement } from './ignite-element.js';
import { IgniteTemplate, div, html, list, a } from './ignite-template.js';
import { IgniteTemplate, div, html, list, a, slot } from './ignite-template.js';
class Sheet extends IgniteElement {
constructor() {
super();
this.show = false;
this.items = [];
this.href = "www.google.com";
this.name = "default content";
}
get properties() {
return [
"show",
"name",
"items",
"href"
];
return {
show: false,
items: ["1", "2"],
href: "www.google.com",
name: "default content"
};
}
render() {
@ -27,9 +22,12 @@ class Sheet extends IgniteElement {
new div(
new html("<h2>this is before</h2>"),
new list(this.items, (item) => {
return new a(this.name).attribute("href", this.href)
return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
}),
new html("<h2>this is after</h2>")
new html("<h2>this is after</h2>"),
new html("<h3>---- begin sheet's slot ----<h3>"),
new slot(this),
new html("<h3>---- end of slot ----</h3>")
)
);
}