RiotのTodo Exampleを
Svelteで実装したら、どうなるかを試してみました。
下記のコードがSvelte のREPLでデモを見れます。
とりあえず試した所感としては
Svelteのバインドは本当に便利！
チェックボックスの状態の切り替えると
inputの値の更新が直感で利用できます。
これのおかげで、
scriptで書く関数も少なくて済む。
<script>
let title = 'I want to behave!';
let items = [
{ title: 'Avoid excessive caffeine', done: true },
{ title: 'Hidden item', hidden: true },
{ title: 'Be less provocative' },
{ title: 'Be nice to people' }
];
let inputText = '';
function addItem() {
items = items.concat({title: inputText});
inputText = '';
}
</script>
<body>
<h3>{title}</h3>
<ul>
{#each items as item}
<li>
<label class={item.done ? 'completed' : null}>
<input type="checkbox" bind:checked={item.done}/>
{item.title}
</label>
</li>
{/each}
</ul>
<input bind:value={inputText}>
<button disabled={!inputText} on:click={addItem}>
Add #{items.length + 1}
</button>
</body>
<style>
body {
font-family: 'myriad pro', sans-serif;
font-size: 20px;
border: 0;
display: block;
max-width: 400px;
margin: 5% auto;
}
button {
background-color: #1FADC5;
border: 1px solid rgba(0,0,0,.2);
font-size: 75%;
color: #fff;
padding: .4em 1.2em;
border-radius: 2em;
cursor: pointer;
margin: 0 .23em;
outline: none;
}
button[disabled] {
background-color: #ddd;
color: #aaa;
}
ul {
padding: 0;
}
li {
list-style-type: none;
padding: .2em 0;
}
.completed {
text-decoration: line-through;
color: #ccc;
}
label {
cursor: pointer;
}
</style>