Git Product home page Git Product logo

Comments (5)

gbj avatar gbj commented on May 20, 2024

Do you mean that the pageshow and load events do not fire on a client-side navigation? That is true—the navigation is being handled entirely in the client so I would not event them to fire. But I also doubt that you actually want to load the JS file every time this component is shown. Why not load the JS file once, when the app loads, and call a function from it whenever you want to? You can export the function from the JS module and bind to it using wasm-bindgen.

from leptos.

ogcatt avatar ogcatt commented on May 20, 2024

It is okay re-importing the whole JS file, as the file basically modulates a html element.

My problem is with triggering events. How can I trigger an event in this psuedo-page load?

from leptos.

gbj avatar gbj commented on May 20, 2024

I do not think that triggering an event is what you want here. If you just want to run some code whenever this component is rendered you could use create_effect, which is essentially the "on mount" hook:

#[component]
pub fn Banner() -> impl IntoView {
    let (loaded, load_up) = create_signal(false);

    create_effect(move |_| {
        load_up(true);
    });

    view ! {
        <Show when=move || loaded.get() == true>
            <Script type_="module" src="/scripts/banner.js"></Script>
        </Show>
    }
}

from leptos.

ogcatt avatar ogcatt commented on May 20, 2024

This does not re-load the element after returning back from another page unless I refresh the page or type in the URL directly.

from leptos.

gbj avatar gbj commented on May 20, 2024

I suspect that is because rendering the same <script> tag again will not load the script again, which is why I suggested loading the script once and calling a function instead. I'm happy to discuss more if you have a reproducible example to share, otherwise there's not much more I can do because I don't know what you're actually trying here.

from leptos.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.