<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Knockout.js 테스트</title>
</head>

<body>

<button onclick="addSimpsons()">Add Simpsons</button>
<button onclick="getSimpsons()">Get Simpsons</button>
<br />
<button onclick="addFriends()">Add Friends</button>
<button onclick="getFriends()">Get Friends</button>

<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody data-bind="foreach: friends">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>

</body>

<script>
let family, friends

const SimpsonFamily = [
{ firstName: 'Homer', lastName: 'Simpson' },
{ firstName: 'Marge', lastName: 'Simpson' },
{ firstName: 'Bart', lastName: 'Simpson' },
{ firstName: 'Lisa', lastName: 'Simpson' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
const SimpsonFriends = [
{ firstName: 'Edna', lastName: 'Krabappel' },
{ firstName: 'Ned', lastName: 'Flanders' },
{ firstName: 'Charles', lastName: 'Burns' }
]

function doInit() {
ko.applyBindings({
people: family,
human: friends
})
}

function getSimpsons() {
const data = [
{ firstName: 'Abraham', lastName: 'Simpson' },
{ firstName: 'Mona', lastName: 'Simpson' }
]

family.removeAll()
family(data)
}

function addSimpsons() {
family.push({ firstName: 'Maggie', lastName: 'Simpson' })
}

function getFriends() {
const data = [
{ firstName: 'Herbert', lastName: 'Powell' },
{ firstName: 'Larry', lastName: 'Burns' }
]

friends.removeAll()
friends(data)
}

function addFriends() {
friends.push({ firstName: 'Nelson', lastName: 'Muntz' })
friends.push({ firstName: 'Milhous', lastName: 'Van Houten' })
}

window.onload = () => {
family = ko.observableArray(SimpsonFamily)
friends = ko.observableArray(SimpsonFriends)

doInit()
}
</script>

</html>



앱을 할 거도 아니고, 필요한 건 리스트렌더링 뿐인데 Vue나 React는 좀 에바다.


역행하는 원시인 소리 듣더라도 문제될게 없으면, js 순정이랑 얘만 써야겠다.


https://gist.github.com/edp1096/798e41c59f8aea228d641341f57f1cf4



끝.