接收类型错误：无法在 Stimulus.js Controller Rails 6 中使用 jquery_ujs 读取未定义的属性“火”

问题描述

我发现您可以使用观察者来跟踪具有刺激数据属性的容器内部的变化。我一直在尝试使用stimulus.js 跟踪动态添加到聊天容器的新消息div——我唯一的问题，我不知道相当于 Rails.fire(entry.target,'resize ')。由于您不能使用 rails_ujs，因此 jquery_ujs 是唯一可能具有该功能的可用工具。如何使用 jQuery_ujs 获得与 Rails.fire() 相同的功能？

javascripts/application.js

//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap

日志

conversation_controller.js:14 Uncaught TypeError: Cannot read property 'fire' of undefined
    at ResizeObserver.<anonymous> (conversation_controller.js:14)

conversation_controller.js

import { Controller } from "stimulus"

const observer = new ResizeObserver(entries => {
  for(let entry of entries) {
    $.rails.fire(entry.target,'resize') // doesn't work returns error
  }
})

export default class extends Controller {

    connect() {
        observer.observe(this.element)
        this.shouldScroll = true
        this.scrollToBottom()
        alert('Scrolling')
    }

    scrollToBottom() {
        const { scrollHeight,clientHeight,offsetHeight } = this.element
        if (scrollHeight >= clientHeight) {
            this.element.scrollTop = scrollHeight - clientHeight
        }
    }

    handleAdded() {
        const {scrollHeight,clientHeight} = this.element
        if(clientHeight >= scrollHeight) {
            this.shouldScroll = true
        }
        if(this.shouldScroll) {
            this.scrollToBottom()
        }
    }

    handleScroll() {
        const { scrollTop,scrollHeight,offsetHeight } = this.element
        if (clientHeight >= scrollHeight) {
            this.shouldScroll = true
        } else {
            this.shouldScroll =
                Math.abs((scrollTop + offsetHeight) - scrollHeight) < 1
        }
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）