ข้ามไปยังเนื้อหา

Template Blocks

React render conditional และ list ด้วย JavaScript ล้วน ๆ: ternary, && และ .map() ภายใน JSX ส่วน Svelte มี template block syntax — control-flow tag เฉพาะที่อยู่ใน markup ใกล้เคียงกับวิธีทำงานของภาษา HTML templating อย่าง Handlebars หรือ Jinja มากกว่า

Conditional: `{#if}` / `{:else}` เทียบกับ ternary ใน JSX

function Status({ loggedIn }) {
  return (
    <div>
      {loggedIn
        ? <p>Welcome back!</p>
        : <p>Please log in.</p>}
    </div>
  );
}

<script>
  let { loggedIn } = $props();
</script>

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in.</p>
{/if}

คุณยังเพิ่ม branch {:else if condition} ได้เหมือนกับ else if ใน JavaScript เป๊ะ ๆ

List: `{#each}` เทียบกับ `.map()`

function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit, i) => (
        <li key={i}>{fruit}</li>
      ))}
    </ul>
  );
}

<script>
  let { fruits } = $props();
</script>

<ul>
  {#each fruits as fruit, i (i)}
    <li>{fruit}</li>
  {/each}
</ul>

ตัว (i) ที่อยู่ท้ายสุดคือ keying expression — เทียบเท่ากับ prop key ของ React ควรใช้ ID ที่ไม่ซ้ำและคงที่เมื่อมีให้ใช้ (อย่าใช้ index)

Async: `{#await}` เทียบกับ `useEffect` + state

function UserCard({ userId }) {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/users/' + userId)
      .then(r => r.json())
      .then(setUser);
  }, [userId]);
  if (!user) return <p>Loading...</p>;
  return <p>{user.name}</p>;
}

<script>
  let { userId } = $props();
  let promise = fetch('/api/users/' + userId).then(r => r.json());
</script>

{#await promise}
  <p>Loading...</p>
{:then user}
  <p>{user.name}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

ลองเล่น: list แบบ interactive พร้อม filter

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let items = $state(['Apples', 'Bananas', 'Cherries', 'Dates', 'Elderberries']);
  let query = $state('');
  let filtered = $derived(items.filter(i => i.toLowerCase().includes(query.toLowerCase())));
</script>

<input bind:value={query} placeholder="Filter fruits..." />

{#if filtered.length === 0}
  <p>No matches for "{query}".</p>
{:else}
  <ul>
    {#each filtered as item (item)}
      <li>{item}</li>
    {/each}
  </ul>
{/if}

<style>
  input { margin-bottom: 0.5rem; padding: 0.25rem 0.5rem; width: 100%; box-sizing: border-box; }
  li { padding: 0.15rem 0; }
</style>