J'ai le code suivant

<body>
    <app>Loading...</app>

    <script src="assets/js/vendors.bundle.min.js"></script>
    <script src="assets/js/main.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
    <script src="assets/js/pages/doc.script.min.js"></script>

    <script src="_framework/blazor.webassembly.js" autostart="false"></script>        
</body>

Et à l'intérieur du main.bundle.js j'ai

jQuery(document).ready(function () {
    Layout1.init();
    Blazor.start();
});

Je peux déboguer et voir que DOM n'est pas prêt lorsque Layout1.init (); est appelé les écouteurs d'événements du bouton de résultats à ne pas appliquer, par exemple var $sidebarCompactToggle = $(".sidebar-compact-switch");

Quelqu'un sait-il comment puis-je exécuter le script une fois que DOM est prêt?

Mise à jour # 1

@inject IJSRuntime JSRuntime

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("Layout1.init()");
        }
    }
}

Et j'obtiens l'erreur suivante:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'init()' in 'window.Layout1'.
      Error: Could not find 'init()' in 'window.Layout1'.
          at https://localhost:44357/_framework/blazor.webassembly.js:1:9198
          at Array.forEach (<anonymous>)
-1
pantonis 30 août 2020 à 14:19

2 réponses

Meilleure réponse

Vous pouvez exécuter le script en utilisant JSInterop ... Définissez simplement une fonction JS pour contenir du code pour initialiser les objets JS et appelez-la une fois à partir de la paire de méthodes OnAfterRender (Async). Ces méthodes peuvent contenir du code qui doit être exécuté après le rendu des composants. Ils obtiennent également un paramètre booléen qui indique si l'exécution actuelle de la méthode est effectuée pour la première fois.

1
enet 30 août 2020 à 12:55

Le document prêt se produira toujours avant les mises à jour de votre interface utilisateur, par exemple, lorsque vous naviguez vers une nouvelle page dans laquelle vous ne naviguez pas réellement, blazor met simplement à jour les éléments de la page actuelle et met à jour l'URL.

Vous devrez modifier les valeurs de l'attribut class de l'élément HTML en c #.

2
Peter Morris 31 août 2020 à 07:57