mindol1004/simple-component
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: example03 작성 완료

Browse Source
This commit is contained in:
junilHwang
2020-10-24 18:24:26 +09:00
parent e0c576cddd
commit f11dca9121
4 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
example03/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Simple Component 2</title>
</head>
<body>
<div id="app"></div>
<script src="./src/app.js" type="module"></script>
</body>
</html>

10
example03/src/app.js Normal file
View File

@@ -0,0 +1,10 @@
import Items from "./components/Items.js";
class App {
constructor() {
const $app = document.querySelector('#app');
new Items($app);
}
}
new App();

23
example03/src/components/Items.js Normal file
View File

@@ -0,0 +1,23 @@
import Component from "../core/Component.js";
export default class Items extends Component {
setup () {
this.$state = { items: ['item1', 'item2'] };
}
template () {
const { items } = this.$state;
return `
<ul>
${items.map(item => `<li>${item}</li>`).join('')}
</ul>
<button>추가</button>
`
}
setEvent () {
this.$target.querySelector('button').addEventListener('click', () => {
const { items } = this.$state;
this.setState({ items: [ ...items, `item${items.length + 1}` ] });
});
}
}

20
example03/src/core/Component.js Normal file
View File

@@ -0,0 +1,20 @@
export default class Component {
$target;
$state;
constructor ($target) {
this.$target = $target;
this.setup();
this.render();
}
setup () {};
template () { return ''; }
render () {
this.$target.innerHTML = this.template();
this.setEvent();
}
setEvent () {}
setState (newState) {
this.$state = { ...this.$state, ...newState };
this.render();
}
}