Блог

Главная - Вопросы по программированию - Запуск библиотек JavaScript (Looper) на стороне сервера Blazor-некоторый код javascript не выполняется

Запуск библиотек JavaScript (Looper) на стороне сервера Blazor-некоторый код javascript не выполняется

#javascript #jquery #blazor #looper

Вопрос:

Я пытаюсь внедрить тему Looper в свое серверное приложение blazor, и у меня есть библиотеки javascript, на которые ссылаются в конце in _Host.cshtml.Однако некоторые сценарии в theme.min.js не работает. Почему?

     <script src="/Library/vendor/jquery/jquery.min.js"></script>
    <script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
    <script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/Library/vendor/pace-progress/pace.min.js"></script>
    <script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
    <script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/Library/javascript/theme.min.js"></script>
    <script src="_framework/blazor.server.js"></script>

Моя проблема в том, что в то время как

     <div data-toggle="drowndown"></div> works, but hamburger menu toggle 
<button class="hamburger hamburger-squeeze mr-2" type="button" data-toggle="aside-menu" aria-label="toggle aside menu"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button>

не работает. Что я здесь упускаю? Что я делаю не так? Мой сценарий изменения темы также не запущен. Если я пройду через theme.js и я вижу, что этот скрипт запускается, когда blazor не активен (комментирует blazor.js) но при активном blazor этот скрипт не запускается.

 (line 610) in /library/javascript/theme.js
}, {
    key: "toggleAside",
    value: function toggleAside() {
      var _this4 = this;

      var $trigger = $('[data-toggle="aside"]');
      $trigger.on('click', function () {
        var isShown = $('.app-aside').hasClass('show');
        $trigger.toggleClass('active', !isShown);
        if (isShown) _this4.hideAside();else _this4.showAside();
      });
    }

Мое обоснованное предположение состоит в том, что theme.js использует ли blazor что-то, чего он не позволяет? Есть ли у кого-нибудь достаточно опыта работы с темой Looper (или с javascript в целом), чтобы знать, почему это не сработает? В частности, переключатель гамбургеров и код переключения тем

     (line 1992 in /library/javascript/theme.js)
var Looper = function () {
  var Looper = new Theme(); // toggle skin thought button

  $('[data-toggle="skin"]').on('click', function (e) {
    e.preventDefault();
    var skin = Looper.skin === 'dark' ? 'default' : 'dark';
    Looper.setSkin(skin); // we need to refresh our page after change the skin

    location.reload();
  }).each(function () {
    var isDarkSkin = Looper.skin === 'dark';
    var $icon = $(this).find('.fa-moon');

    if (isDarkSkin) {
      $icon.addClass('far');
      $icon.removeClass('fas');
    }
  }); // make it global

  return Looper;
}();

Это веб-сайт https://worshipground.azurewebsites.net/ Вы можете использовать инструмент инспектор, чтобы убедиться, что blazor правильно загружен и все файлы javascript загружены в /библиотека/javascript и /библиотека/поставщик/…

     <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- End Required meta tags -->


    <title> Starter Template | Looper - Bootstrap 4 Admin Theme </title>
    <base href="~/" />
    <meta name="theme-color" content="#3063A0">
    <link rel="apple-touch-icon" sizes="144x144" href="Library/apple-touch-icon.png">
    <link rel="shortcut icon" href="Library/favicon.ico">


    <link href="https://fonts.googleapis.com/css?family=Fira Sans:400,500,600" rel="stylesheet">
    <link rel="stylesheet" href="/Library/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="/Library/vendor/fontawesome/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/Library/stylesheets/theme.min.css" data-skin="default">
    <link rel="stylesheet" href="/Library/stylesheets/theme-dark.min.css" data-skin="dark">
    <link rel="stylesheet" href="/Library/stylesheets/custom-app.css">
    <link rel="stylesheet" href="/Library/stylesheets/custom.css" data-skin="default">
    <link rel="stylesheet" href="/Library/stylesheets/custom-dark.css" data-skin="dark">
    <script>
        var skin = localStorage.getItem('skin') || 'default';
        var isCompact = JSON.parse(localStorage.getItem('hasCompactMenu'));
        var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="'   skin   '"])');
        // Disable unused skin immediately
        disabledSkinStylesheet.setAttribute('rel', '');
        disabledSkinStylesheet.setAttribute('disabled', true);
        // add flag class to html immediately
        if (isCompact == true) document.querySelector('html').classList.add('preparing-compact-menu');
    </script>
   
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>





    <script src="/Library/vendor/jquery/jquery.min.js"></script>
    <script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
    <script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/Library/vendor/pace-progress/pace.min.js"></script>
    <script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
    <script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/Library/javascript/theme.min.js"></script>
    <script>
        Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
    </script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Ответ №1:

Возможно, вы обнаружите, что у вас есть своя работа с точки зрения того, чтобы тяжелый шаблон JavaScript хорошо работал в Blazor.

Вам, вероятно, потребуется использовать IJSRuntime

https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

Комментарии:

1. Чего я не понимаю, так это того, что код в bootstrap.js работает нормально, но почему бы не переключить меню гамбургеров, чтобы оно не работало? Хотя я понимаю, почему вы сказали бы «… вероятно, вам нужно использовать IJSRuntime», я не думаю, что это хороший ответ, потому что сама суть вопроса заключается в том, чтобы выяснить, почему это иногда работает, а иногда нет.

2. Проблемы возникают из-за конфликтов между тем, что делают библиотеки JS, и тем, что blazor.server.js делает. Ты строишь дом на полпути. Если у вас есть интенсивная активность по манипулированию JS DOM в компоненте/странице, отображаемой Blazor, удачи, она вам понадобится!

Ответ №2:

Мне кажется, я знаю, откуда берется эта проблема! Если вы закомментируете следующий код в файле «Host.cshtml», эта проблема, скорее всего, исчезнет!

 <script>
    Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>

Но!!!! Вместо этого вы получите некоторые ошибки javascript, связанные с «WebSocket»! что-то вроде этого:
«WebSocket не находится в открытом состоянии»
Или
«Не пойманный (в обещании) Ошибка: Не удается отправить данные, если соединение не находится в состоянии «Подключено».»
Причиной этих ошибок является конфликт между «pace.min.js» файл и «blazor.server.js» файл! Вы можете проверить эту ссылку для получения дополнительной информации и получить дополнительную помощь

Метки: