Добавление простого сценария манипуляции DOM JS через Interop - PullRequest
Новая
       29

Добавление простого сценария манипуляции DOM JS через Interop

0 голосов
/ 31 января 2020

Я пытаюсь импортировать эту функцию Javascript в мое приложение Blazor. Функция скрипта проста, добавить класс c-show в существующий элемент списка <li>, который уже имеет два класса. Оригинал javascript в его завершении:

Javascript

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.c-sidebar-nav-item.c-sidebar-nav-dropdown').forEach(dropMenu => {
        dropMenu.addEventListener('click', () => dropMenu.classList.toggle('c-show'));
      });
    })

Этот скрипт влияет на этот элемент: 

<li class="c-sidebar-nav-item c-sidebar-nav-dropdown">

Добавление c-show делает это: 

<li class="c-sidebar-nav-item c-sidebar-nav-dropdown">

Я пытаюсь добиться того же с Blazor / C# через Interop.

Поэтому я добавил следующее к своему элементу: 

<li class="c-sidebar-nav-item c-sidebar-nav-dropdown" @onclick="dropMenu">

И мой фрагмент кода: 

@code {

  public async void dropMenu() 
  {
    classList.toggle('c-show')
  }
}

Но я не совсем уверен, как получить результат, ради которого я работаю, поскольку все, что я знаю, это то, что мне нужно настроить javascript как-то, но не уверен, как.

1 Ответ

0 голосов
/ 31 января 2020

Вы можете использовать вызов JSInterop из метода OnAfterRenderAsyn c для инициализации вашего объекта JavaScript, это можно сделать только один раз, а затем вы можете вызывать ваши методы JavaScript каждый раз при визуализации компонента.

Примечание: вам нужно внедрить объект JSRuntime для выполнения вызовов JSInterop. 

 @page "/"
 @inject IJSRuntime jsRuntime

 <li id="myid" @ref=MyElementReference class="c-sidebar-nav-item c-sidebar- 
                                        nav-dropdown" @onclick="dropMenu"> 

@code{
    // This add an element reference to the li element, which you can pass to 
    // your JavaScript functions
    ElementReference MyElementReference;

    // You have to call your JavaScript code after your components have been 
    // rendered. The OnAfterRenderAsync method is called after the component 
    // has been rendered, and thus you can put code here to initialize your 
    // component. This should be when firstRender is true, and multiple calls 
    // to your JavaScript objects, when firstRender is false.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Note: Here you initialize your elements, only once. When the user 
        // clicks on the li element, you'll call your required method from 
        // the click event handler dropMenu

        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", 
                    MyElementReference);
        }

    }
}



public async void dropMenu() 
  {
    await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", 
                        MyElementReference);

  }

Поместите ваш скрипт в конец файла _Host.cs html, чуть ниже Настройте ваш элемент соответственно , Обратите внимание, код здесь отображает только предупреждение с идентификатором, присвоенным тегу li. Вместо этого вам придется добавить код для изменения ваших объектов по мере необходимости. 

<script src="_framework/blazor.server.js"></script>
<script>
        window.MyJSMethods =
        {
            myMethod: function (element) {
                window.alert(element.id);
            }
        };
    </script>

Обратите внимание, что параметр с именем element , который принимает функция, является объектом-элементом, поскольку мы определили аргумент как ElementReference в Blazor. Конечно, вы могли бы передать идентификатор элемента или имя класса и т. Д. c.

...