edp1096/simsons-ko.html

## simsons-ko.html
<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>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
</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>
	<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>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
	</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>