标签: stimulusjs

我是 JavaScript 新手，可能想用它来模拟 Ruby。我使用 StimulusJS，但我认为这个问题一般适用于 JS。

我的目标是运行一个方法（单击按钮时），该方法将从按钮获取并显示该类别的所有子类别。该方法/函数将首先获取数据，然后操作 DOM。displaySubcategories我想将它们分成两个方法，但是当我从第一个方法 ( ) 中调用另一个方法 ( ) 时getSubcategories，值会发生event变化。this与块中的情况相同fetch- 我需要先将其分配，self以便稍后能够与对象本身相关。

有一个更好的方法吗？就像所有方法都可以访问的变量（Ruby 中的实例变量）一样？或者我根本不应该将它们分成两个函数（不是 JS 方式）？

import {Controller} from "stimulus"

export default class extends Controller {
  static targets = ["categoryId", "categoryLabel", "subcategoryList", "subcategoryHeader"]

  getSubcategories() {
    let category_id = event.target.firstElementChild.value
    let url = "/api/categories/" + category_id + "/subcategories?levels=1"
    let self = this
    let e = event

    fetch(url)
      .then(response => response.json())
      .then(json_response => {
        self.displaySubcategories(json_response, e)
      }) …

我在新的 Rails 6 应用程序中安装了 Stimulus.js。

在我的文件中packs/application.js，我有以下内容：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

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


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag …

我们正在研究 Stimulus.js 与我们的 Rails6 应用程序一起使用，并不断突破概念壁垒，将我们的思维从 jQuery 转向 Stimulus。

例如：

在页面的一部分上，我们有一个按钮，当单击该按钮时，我们希望将内容加载到页面另一部分上的 div 中。在 jQuery 中，这很简单 - 响应click事件，将部分从 Rails 后端加载到该 div 中。

在刺激中，如何做到这一点？看起来一切都需要在一个大控制器中，以便按钮可以看到“目标 div”。所以本质上我们正在编写“页面”控制器，这看起来开销很大。此外，它扰乱了我们将页面分解为部分的方式，因为现在这些部分需要共享一个刺激控制器。

我正在学习 Turbo Frames 和 Streams + Stimulus，所以我可能没有 100% 步入正轨。我有一个用于创建新对象的表单，但在表单中我希望有一个选择组件，该组件将根据选择显示某些字段。值得注意的是，因此，在用户做出此选择之前我不想提交表单。

这就是我所拥有的：

_form.html.erb

<div class="form-group mb-3">
   <%= form.label :parking, class: 'form-label' %>
   <%= form.number_field :parking, class: 'form-control' %>
</div>

<%= turbo_frame_tag "turbo_transactions" do %>
   <%= render 'property_transactions' %>
<% end %>

_property_transactions.html.erb

<div class="form-group mb-3" data-controller="property-transaction">
    <%= label_tag :property_transactions, 'Property in:', class: 'form-label' %>
    <%= select_tag :property_transactions, options_for_select(@property_transactions.collect {|p| [p.name, p.id]}), { data: 
    { action: "property-transaction#redraw", property_transaction_target: 'transaction', turbo_frame: 'turbo_transactions' }, 
        class: 'form-control', prompt: '', autocomplete: 'off' } %>
</div>

<% if …

我目前有这个简单的刺激 JS 控制器，它从 DOM 中删除一个元素

import { Controller } from "stimulus"
export default class extends Controller {
  static targets = [ "element" ]
    close () {
        this.elementTarget.remove()
    }
}

有没有办法在删除之前淡出元素？

所以，我有一个 Rails 应用程序，安装了 webpacker、vue、turbolinks 和stimulus js。
我遇到的问题是，即使控制器只导入一次，即使我暂时禁用涡轮链接，该initialize()功能也会connect()被调用两次。
仅当我进行刷新时才会发生这种情况（即不是当我第一次访问该页面时，而是仅当我执行页面重新加载时）。
奇怪的是，disconnect()只被调用一次（当我离开页面时）

这很糟糕，因为我需要在初始化时修改 DOM，所以我添加了两次元素。有人知道造成这种情况的原因和/或解决方案吗？

编辑：按照要求的application.js

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

import "stylesheets"
import "controllers"
import "components"

组件/index.js

import Vue from 'vue/dist/vue.esm'
import BootstrapVue from 'bootstrap-vue'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(BootstrapVue)
Vue.use(TurbolinksAdapter)

const components = {}
const context = require.context("components", true, /_component\.vue$/)
context.keys().forEach(filename => {
  const component_name = filename.replace(/^.*[\\\/]/, '').replace(/_component\.vue$/, '')
  const component = context(filename).default
  components[component_name] = component
})

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: …

早上好。我在遵循 Stimulus 文档中指定的名称约定的 Stimulus 控制器和命名空间方面遇到问题。

当我像这样使用我的控制器时，一切都会按预期工作：

/controllers/gifts_controller.js
data-controller="gifts"

如果我以这种方式使用控制器，则没有任何效果：

/controllers/frontend/gifts_controller.js
data-controller="frontend--gifts"

Stimulus 文档指定子文件夹中控制器的名称约定必须与第二个示例类似，但它不起作用。没有错误，就像不存在一样。

有任何想法吗？

编辑：抱歉我写错了

我想要做什么： 我想在 Rails 7 应用程序中使用 Leaflet。

我做了什么： 我创建了 Rails 应用程序并生成了一个仅使用标题调用的模型（带有控制器和视图）map。然后我添加了一条地图记录。

我向应用程序添加了传单，如下所示：

./bin/importmap pin leaflet

div我添加了一张带有刺激属性的地图app/views/map/show.html.erb，现在看起来像这样：

<p style="color: green"><%= notice %></p>
<%= render @map %>

<div data-controller="map" data-target="map.placeholder">

<div><%= link_to "Edit this map", edit_map_path(@map) %> | <%= link_to "Back to maps", maps_path %>
<%= button_to "Destroy this map", @map, method: :delete %> </div>

然后我创建了app/javascript/controllers/map_controller.js如下所示：

// map_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "placeholder" ] …

我有两个独立的刺激控制器。一个用于管理表，另一个用于触发表的新行。

我在页面上有一个按钮，调用turbo-table-new-row#show函数，它确实调度事件并调用turbo-table#show函数，但我似乎无法访问turbo-表的“this”，所以我无法访问目标、值等......

如果我将按钮移动到涡轮表的范围内，我不需要第二个控制器，一切都会正常工作。但是，从 UI 角度来看，这是行不通的。

收到事件后如何访问接收控制器的“this”？

 <div data-controller="turbo-table-new-row turbo-table"
      data-action="turbo-table-new-row:show->turbo-table#display">

    <button data-action="click->turbo-table-new-row#show">
 </div> 

 // turbo-table-new-row-controller

  show(e) {
   this.dispatch("show", { detail: { url: e.params.url} })
  }

  // turbo-table-controller
show(e) {
        console.log("[turbo_table] - turbo-table-new-row->show event")
        console.log(e.detail.url)

  // I don't have access to the turbo-table-contoller 'this'

  this.hasPanelTarget ...

}

过去一两个月我一直在与 Hotwire 合作，并试图了解如何在第一次渲染后重新加载特定的涡轮框架。

假设我有一个用于用户搜索的简单 Rails 控制器。如果它的参数为name，则返回与该参数匹配的用户name，如果没有，则返回所有用户。

class UserSearchController
  def show
    return User.where(name: params[:name]) if params[:name].present?

    return User.all
  end
end

我连接了一个 Turboframe，它可以正确延迟加载 DOM 中的所有用户。我想要弄清楚的是如何更新 Turboframe 并重新绘制框架。我已经尝试了一些 Stimulus 并尝试将 src 设置为端点，这是我在其他帖子中看到的建议：

  reload() {
    const {src: src} = this;
    this.src = null;
    this.src = src;
  }

但这似乎不起作用，它不会重新绘制涡轮框架。我可以看到它正在向 Rails 后端发出请求。

有人能指出我在页面加载后重新加载/重绘框架的方向吗？我不确定我是否完全偏离了方向或者处于正确的位置。