События jquery не запускаются с использованием webpacker и coffeescript - PullRequest
Новая
       80

События jquery не запускаются с использованием webpacker и coffeescript

0 голосов
/ 28 сентября 2019

Попытка построить новое приложение rails 6 с нуля, чтобы заменить приложение rails 5.2.Попытка использовать веб-упаковщик вместе с jquery и coffeescript для сайта Foundation

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

Все работает (Foundation выполняет x-grid, выноски и т. Д., JQuery загружается, и я могу регистрировать JQuery объекты, компиляторы Coffeescript), за исключением того, что JQuery события, похоже, не запускают или не создают слушателя.

app / javascript / pack / application.js 

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import "foundation-sites"
require("../src/application")
require("../src/coffee/application.coffee")


$(document).on('turbolinks:load', function() {
  $(document).foundation()
});

app / javascript / src / application.scss 

@import './foundation/foundation.scss';

config / webpack / environment.js 

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

environment.loaders.prepend('coffee', coffee)
module.exports = environment

root index.slim тестовая страница 

.grid-container
  .grid-x.grid-margin-x
    .small-4.cell
      h1 Home#index
      p Find me in app/views/home/index.html.slim
    .small-4.cell
      p and something over here?
    .small-4.cell
      p and more over here?
  .callout.alert
    | and maybe an alert

  .callout.notice

    button#test_button.button I be a button

app / javascript / src / coffee / application.coffee 

import './hello_coffee.coffee';
import './test_button.coffee';

app / javascript / src / coffee/test_button.coffee

console.log "looking for a button"

jQuery ->
  console.log $('#test_button')
  $('#test_button').on 'click', (e) ->

    alert "I see you be a button"
    console.log "should only see if test button clicked"

Загружается страница индекса корневого теста.Он регистрирует «поиск кнопки» перед функцией jQuery. Он регистрирует объект #test_button jquery. Тестовая кнопка не реагирует на нажатие .on.Предупреждение или другие консольные сообщения не отображаются.Думаю, я попробовал просто .click и не получил ответа

Как вы можете заметить, я не в фигурных скобках, не в html-тегах и т. Д. (Slim и coffee). У меня много кофе-скриптов, и я действительно не хочуизменить на этом этапе.

Не очень хорошо использовать веб-инспектор для отладки (сафари), но есть вещи, просто не могу или не знаю, как найти слушателей

Есть идеи, чтоМне не хватает, что события не загружаются / запускаются?

Дополнительная информация:

Я сдался.Webpacker, по-видимому, обрабатывает свободный JavaScript по-другому, чем конвейер ресурсов.Почти весь мой javascript (coffescript) - это UJS.(есть ли загруженный элемент DOM, класс, поведение и т. д.), затем добавьте прослушиватель, чтобы обработать его, если на него щелкнули, изменили и т. д.

Я что-то не так делаю, и я потратил больше времени на попыткизаменить то, что работает, на то, что должно было быть лучше.Мне придется подождать, пока все больше людей не запутаются, и кто-то еще не укажет, что отличается.Webpacker больше подходит для одностраничных приложений JS, и я этим не занимаюсь.

Я пытался вывести разные вещи из уравнения.Использовал события DOM вместо jQuery.удалить основание и т. д. и т. д. Нет ошибок на консоли js.Я даже нашел, где посмотреть, кто слушает, а мой там, он просто не реагирует на щелчок.Возможно, потому что это просто новое приложение оболочки в режиме разработки.

...