Melepasi objek sebagai prop dalam Svelte mengekalkan medan objek dalam HTML daripada berubah?

Question

Saya ada kod Svelte ini:

player.svelte:

<script>
    import PlayerControls from './PlayerControls.svelte';

    let audio;
</script>

<audio src={...} bind:this={audio} />
<PlayerControls {audio} />

PlayerControls.svelte:

<script>
    import PlayIcon from '../icons/PlayIcon.svelte';
    import PauseIcon from '../icons/PauseIcon.svelte';

    export let audio;

    const onClick = () => {
        if (audio?.paused) audio.play();
        else audio.pause();
    };
</script>

{#if audio?.paused}
    <PlayIcon {onClick} />
{:else}
    <PauseIcon {onClick} />
{/if}

Jika saya tekan ikon main, ikon tidak berubah tetapi audio bermula, jika saya klik sekali lagi audio berhenti dan ikon tidak berubah. Nampaknya audio.jeda hanya "perubahan" dalam skrip, bukan dalam html. Apakah masalah di sini, dan apa yang saya tidak faham tentang Svelte?

Answer 1

Penyelesaian paling mantap dalam kes yang anda berikan ialah menggunakan elemen <audio> peristiwa khusus untuk memberi amaran kepada kes untuk menyemak semula status ref. Ini membolehkan svelte menguruskan kitaran hayat pendengar anda, dan juga membenarkan elemen itu sendiri mengendalikan semua kes kelebihan bila/bagaimana keadaan main balik berubah.

sssccc

REPL

Jawapan asal

Pautan dokumentasi dalam ulasan saya merangkumi cara mudah untuk menyelesaikan masalah anda Reaktif/Kemas kini Tatasusunan dan Objek , iaitu hanya menetapkan semula audio 作为 onClick langkah terakhir dalam pengendali.

Perlu diingat bahawa ini tidak akan menjejaki perubahan dalam paused jika audio tamat dengan sendirinya.

const onClick = () => {
    if (audio?.paused) audio.play();
    else audio.pause();
    
    audio = audio;
};

REPL

Sunting

Saya pada mulanya mencadangkan menukar atribut paused terus:

const onClick = () => {
  if (audio?.paused) {
    audio.play();
    audio.paused = false;
  } else {
    audio.pause();
    audio.paused = true;
  }
};

Tetapi mengabaikan fakta bahawa audio ialah ref dan audio 是 ref 且 paused ialah sifat baca sahaja.