AddressBook.svelte

<script>

    import { Tracker } from 'meteor/tracker';
    import { onDestroy } from 'svelte';
    import AddressBook from '../lib/AddressBook.js';

    let list = [];
    const computation = Tracker.autorun(() => {
        list = AddressBook.find({},{limit:10,sort:{name:1}}).fetch();
    });

    onDestroy(() => {
        computation.stop();
    });

    let remove = function(item) {
        AddressBook.remove({_id:item._id});
    };

    let address = {
          name : ""
        , phone : ""
        , email : ""
        , company : ""
        , birthday : ""
    };

    let insert = function(){
        AddressBook.insert(address);
    };

</script>
    {address.name}
<div>
    <input type="text" bind:value="{address.name}" placeholder="이름">
    <input type="text" bind:value="{address.phone}" placeholder="전화번호">
    <input type="text" bind:value="{address.email}" placeholder="이메일">
    <input type="text" bind:value="{address.company}" placeholder="회사">
    <input type="text" bind:value="{address.birthday}" placeholder="생일">
    <button on:click={() => insert()}>등록</button>
</div>

<div>
    <h1>AddressBook</h1>
    <table border="1">
        <thead>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
            <th>이메일</th>
            <th>회사</th>
            <th>생일</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        {#each list as item}
        <tr>
            <td>{item.name}</td>
            <td>{item.phone}</td>
            <td>{item.email}</td>
            <td>{item.company}</td>
            <td>{item.birthday}</td>
            <td>
                <button on:click={() => remove(item)}>삭제</button>
            </td>
        </tr>
        {/each}
        </tbody>
    </table>
</div>