Проблема с <% = yield%>, турболинками и местами Алголии - PullRequest
Новая
       27

Проблема с <% = yield%>, турболинками и местами Алголии

0 голосов
/ 07 февраля 2020

Я работал над этой ошибкой уже несколько дней и не могу ее решить. Мне действительно нужна помощь. У меня есть этот код в моем приложении. html .erb файл. Мне посоветовал член сообщества, и это должен быть правильный способ сделать это: 

<!DOCTYPE html>
<html>
  <head>
    <title>Neigbornow</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= yield :meta %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    <%= javascript_pack_tag 'autocomplete' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= yield :js %>
    <%= yield :css %>

  </head>
  <body>
    <% if @user.nil? %>
      <%= render 'layouts/header' %>
    <% elsif user_signed_in? && @user.street.nil? %>
      <%= render partial: "layouts/header_address" %>
    <% else %>
      <%= render 'layouts/header_rest' %>
    <% end %>
    <div id="main">
      <%= yield %>
    </div>
  </body>
</html>

Этот код нарушает макет моей домашней страницы:

enter image description here

Итак, я поиграл с этим и поместил <% = yield%> в начале тела. Теперь дизайн выглядит так, как я его определил:

enter image description here

Но, если честно, я действительно не получаю <% = yield% > Рул, так что я не уверен, что там происходит. Кроме того, у меня есть дополнительные вопросы. Если я использую 

<%= yield :js %>

, это на самом деле «ломает» мой файл автозаполнения algolia. 

import places from 'places.js';

const initAutocomplete = () => {
  var placesAutocomplete = places({
    container: document.getElementById('user_street'),
    templates: {
      value: function(suggestion) {
        return suggestion.name;
      }
    }
  }).configure({
    type: 'address'
  });

  placesAutocomplete.on('change', function resultSelected(e) {
    document.getElementById('user_city').value = e.suggestion.city || '';
    document.getElementById('user_zip_code').value = e.suggestion.postcode || '';
  });
};


export { initAutocomplete };

Опция автозаполнения просто не будет отображаться:

enter image description here

Также происходит еще одна вещь, непосредственно перед перенаправлением на На следующей странице (выше) загрузится модальное окно с ошибками, которое должно отображаться только при появлении ошибок, а не при перенаправлении с текущей страницы.

Если я изменил порядок yield и удалил спецификацию: js, автозаполнение сработает. 

<%= yield :meta %>
<%= yield %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'autocomplete' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= yield :css %>

Но у меня возникает следующая проблема:

enter image description here

И еще одна, нарушающая мой мод с сообщениями об ошибках.

enter image description here

Если я обновлю страницу sh вручную, то модальное поведение, как определено, без проблем.

Я провел некоторые исследования, и я думаю, что проблема здесь в турболинках. Так как я использую javascript в ресурсах и пакетах веб-пакетов (для algolia), я думаю, это каким-то образом приводит мой код в хаос. Я попытался избавиться от турболинков в ресурсах, как описано здесь , и интегрировать их в свой веб-сайт, но это тоже не сработало. Я получил это сообщение об ошибке, добавив 

class ApplicationController < ActionController::Base
  include Turbolinks::Redirection
end

и не смог его решить: 

uninitialized constant ApplicationController::Turbolinks

Я также попытался заключить свой код автозаполнения в функцию, как советовал один из участники, но не работали 

document.addEventListener('turbolinks:load', function(e){ ... })

Я очень ценю помощь в этом, так как я не могу решить ее самостоятельно. Спасибо

...