Passer des objets comme accessoires dans Svelte empêche les champs d'objet en HTML de changer ?

Question

J'ai ce code Svelte :

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}

Si j'appuie sur l'icône de lecture, l'icône ne change pas mais l'audio démarre, si je clique à nouveau, l'audio s'arrête et l'icône ne change pas. Il semble que audio.pause n'ait mis en pause que les "modifications" dans le script, pas dans le code HTML. Quel est le problème ici et qu'est-ce que je ne comprends pas à propos de Svelte ?

Answer 1

La solution la plus robuste dans votre cas donné consiste à utiliser un <audio>élément event spécifique pour alerter svelte afin qu'il revérifie le statut de l'arbitre. Cela permet à svelte de gérer le cycle de vie de votre auditeur, et permet également à l'élément lui-même de gérer tous les cas extrêmes de quand/comment l'état de lecture change.

sssccc

REPL

Réponse originale

Le lien de documentation dans mon commentaire couvre un moyen simple de résoudre votre problème Réactiver/Mettre à jour les tableaux et les objets , qui consiste simplement à réaffecter la audio 作为 onClick dernière étape du gestionnaire.

Gardez à l'esprit que cela ne suivra pas les changements dans paused si l'audio se termine tout seul.

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

REPL

Modifier

J'ai initialement suggéré de changer directement l'attribut paused :

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

Mais ignore le fait que audio est un ref et audio 是 ref 且 paused est une propriété en lecture seule.