Как смонтировать мятежные метки внутри проекта Laravel - PullRequest
Новая
       38

Как смонтировать мятежные метки внутри проекта Laravel

0 голосов
/ 06 января 2019

Мне нужно добавить riot js в мой проект laravel и я не уверен, что делаю правильный способ интеграции riot в проект laravel.

Я попытался сделать следующее в файле blade.php, который находится в папке laravel views. 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Laravel</title>

    <!-- Fonts -->
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,600"
        rel="stylesheet"
        type="text/css"
    />
    <script src="../js/riotcompiler.js" type="riot/tag"></script>
</head>
<body>
    <hello></hello>
    <script src="../tags/hello.tag" type="tag"></script>
    <script>
        riot.mount("hello");
    </script>
    njk
</body>
</html>

Затем, когда я запускаю проект laravel, он генерирует исключение, говоря, что бунт не определен. Но я уже установил бунт во всем мире. Итак, как я могу исправить эту проблему? Нужно ли устанавливать ROT через композитор?

Ответы [ 3 ]

0 голосов
/ 06 января 2019

Если вы переместите файл js в папку public/js, вы можете вызвать его в файле блейда с помощью: 

<script type="text/javascript" src="{{ URL::asset('js/riotcompiler.js') }}"></script>

Функция URL::asset() выдаст вам нужный URL.

0 голосов
/ 06 января 2019

Проблема не в том, что файлы тегов и файл riotcompiler находились в общедоступном каталоге, и не указывал путь в laravel надлежащим образом. Таким образом, работоспособный код выглядит следующим образом. 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Laravel</title>
    <!-- Fonts -->
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,600"
        rel="stylesheet"
        type="text/css"
    />
    <script
        type="text/javascript"
        src="{{ URL::asset('js/riotcompiler.js') }}"
    ></script>
</head>
<body>
    <hello></hello>
    <script
        src="{{ URL::asset('tags/hello.tag') }}"
        type="riot/tag"
    ></script>
    <script>
        riot.mount("hello");
    </script>
    njk
</body>
</html>
0 голосов
/ 06 января 2019

Я верю, что это поможет: 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Laravel</title>
      <!-- Fonts -->
      <link
         href="https://fonts.googleapis.com/css?family=Nunito:200,600"
         rel="stylesheet"
         type="text/css"
         />
      <script src="../js/riotcompiler.js" type="riot/tag"></script>
   </head>
   <body>
      <hello></hello>
      <script src="../tags/hello.tag" type="tag"></script>
      <script>
         riot.compile(function() {
         // here tags are compiled and riot.mount works synchronously
         riot.mount('hello')
         })

      </script>
   </body>
</html>
...