@notify_async

Sometimes you need async function, to fetch data for example.

To update the DOM after an async function, just decorate it with @notify_async.

demo.py

from random import randrange
from prune import Prune, notify_async, notify
from pyscript import fetch

class Pokedex:

    def __init__(self):
        self.pokemon = None
        self.loading = False

    @notify
    def toggle_loading(self):
        self.loading = not self.loading

    @notify_async #update the DOM at the end of the method
    async def get_random_pokemon(self):
        self.toggle_loading()
        pokemon_id = randrange(1,100)
        response = await fetch(f"https://pokeapi.co/api/v2/pokemon/{pokemon_id}")
        data = await response.json()
        self.pokemon = data
        self.toggle_loading()

Prune(pokedex=Pokedex())

Caution

You have to add await before your method call in the html otherwise it wont works.

index.html

<template p-if="store.pokedex.loading">
    <h4 >Loading...</h4>
</template>
<template p-if="store.pokedex.pokemon and not store.pokedex.loading">
    <div>
        <h4 p-text="store.pokedex.pokemon['name']"></h4>
        <img :src="store.pokedex.pokemon['sprites']['front_default']" alt="">
        <h5 p-text="f'height : {store.pokedex.pokemon['height']}'"></h5>
        <h5 p-text="f'weight : {store.pokedex.pokemon['weight']}'"></h5>
    </div>
</template>
<!-- Note the 'await' in the @click -->
<button @click="await store.pokedex.get_random_pokemon()">Get Random Pokemon</button>

Get Random Pokemon