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了。

创建src\stores.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);

然后，在src\App.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;

src\App.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>

效果如下:

最后，全部代码位于：git.code.tencent.com/codetyphon/…