Svelte: Bind Cheat Sheet

Simple Bind:

//MyLink.svelte
<script>
    export let href = ''
    export let title = ''
    export let color = ''
</script>
<a href={href} style={`color: ${color}`} >
  {title}
</a>
// Shorthand
<a {href} style={`color: ${color}`} >
  {title}
</a>
<script>
  import MyLink from "./components/MyLink";
  let link = {
    href: "http://www.mysite.com",
    title: "My Site",
    color: "#ff3300"
  };
</script>
<MyLink {...link} />

Two Way Bind:

<MyInput bind:value={value} />
// Shorthand
<MyInput bind:value />
<select multiple bind:value={fillings}>
  <option value="Rice">Rice</option>
  <option value="Beans">Beans</option>
  <option value="Cheese">Cheese</option>
</select>
<input 
  type="radio" 
  bind:group={tortilla} 
  value="Plain" />
<input
  type="radio" 
  bind:group={tortilla} 
  value="Whole wheat" />
<input 
  type="checkbox" 
  bind:group={fillings} 
  value="Rice" />
<input 
  type="checkbox" 
  bind:group={fillings} 
  value="Beans" />
// Element Binding
<script>
  let myDiv
</script>
<button on:click={() => myDiv.innerText = 'My text'}>
  Click
</button>
<div bind:this={myDiv}/>