关于前端:svelte版本的todolist

svelte 是 react 和 vue 之外的另一个抉择。

创立一个 svelte 利用很容易：

npx degit sveltejs/template todolist
cd todolist
npm install
npm start dev

它会启动 5000 端口，关上后，是这样的成果：

为了在 vscode 里有提醒，须要在 vscode 里装置 Svelte for VS Code。

为了有更好的提醒，输出一条命令，让它反对 typescript：

node scripts/setupTypeScript.js
npm install
npm run dev

这个时候，它曾经反对 typescript 了。

创立 srcstores.ts，在这里设置 todolist 的 list：

import {writable} from 'svelte/store';

interface Todo{
    done:boolean,
    text:string
}

const todo:Todo[]=[
    {
        done:true,
        text:'test-1'
    },{
        done:false,
        text:'test-2'
    }
]

export const list_store = writable(todo);

而后，在 srcApp.svelte 中，导入 list：

import {list_store} from './stores.ts';

因为 list_store 是一个对象，因而还须要再设置一个变量：

let list:Todo[];

并获得值：

const unsubscribe = list_store.subscribe((value) => {list = value;});

此时，就能够用循环，把 todo 给列出来：

{#each list as todo}
    <div class:done={todo.done}>
        <input type="checkbox" checked={todo.done} />
        <input placeholder="What needs to be done?" value={todo.text} />
    </div>
{/each}

此刻的成果是：

接下来减少对 checkbox 的事件处理：

on:change={() => {todo.done = !todo.done;}}

同样，还须要对 input 文本输出进行解决：

on:change={(event) => {todo.text = event.target.value;}}

接下来，减少一个增加按钮，和一个删除按钮。

<button
    on:click={() => {list = list.concat({ done: false, text: ''});
        }
    }>add</button>

<button
    on:click={() => {list = list.filter((todo) => !todo.done);
    }}>clear</button>

还要有一个显示状态:

<p>{remaining} remaining</p>

remaining 是这样定义的：

$: remaining = list.filter((t) => !t.done).length;

srcApp.svelte 全副代码如下：

<script lang="ts">
    import {list_store} from "./stores.ts";

    interface Todo {
        done: boolean;
        text: string;
    }

    let list: Todo[];

    const unsubscribe = list_store.subscribe((value) => {list = value;});

    $: remaining = list.filter((t) => !t.done).length;
</script>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {max-width: none;}
    }
</style>

<main>
    <h1>todo list</h1>
    {#each list as todo}
        <div class:done={todo.done}>
            <input
                type="checkbox"
                checked={todo.done}
                on:change={() => {
                    todo.done = !todo.done;
                    console.log(todo.done);
                }} />
            <input
                on:change={(event) => {todo.text = event.target.value;}}
                placeholder="What needs to be done?"
                value={todo.text} />
        </div>
    {/each}

    <p>{remaining} remaining</p>

    <button
        on:click={() => {list = list.concat({ done: false, text: ''});
        }}>add</button>

    <button
        on:click={() => {list = list.filter((todo) => !todo.done);
        }}>clear</button>
</main>

成果如下:

最初，全副代码位于：https://git.code.tencent.com/codetyphon/svelte-todolist