标签: stimulusjs

我有一个 Stimulus 控制器

# app/javascript/controllers/clubs_controller.js
// handles micropost javascripts
import { Controller } from "stimulus"
import Rails from '@rails/ujs';
export default class extends Controller {

  connect() {
    }

    wait_for_clubs(event) {
      event.preventDefault()
      console.log("in wait_for_clubs", event.target)
      const id = event.target.dataset.value
      console.log("id", id)
      }
    }
}

和html代码

<div data-controller="clubs">
  <span data-action="load@window->clubs#wait_for_clubs" data-value='<%= @user.id %>'>Waiting for Clubs to be prepared</span>
</div>

当页面加载时，控制器具有用户的 id。当我重新加载页面时，我在控制台中看到以下错误

TypeError: Cannot read property 'value' of undefined

这是由var id = event.target.dataset.value;语句触发的。

但是，如果我将事件从 更改load@window为click，那么当我单击跨度时，代码将起作用并检索 id。我该如何解决？

我在使用stimulus.js定位css属性时遇到问题

我想将显示 Flex 切换为无，并在单击图标时显示 Flex

display:flex 

#css

.dropnav{
  display:flex
}

#隐藏控制器

......
static targets = [ "hide" ]
static classes =["display"]
        
connect() {
this.hideTarget.classList.add(this.displayClass)}
toggle(){
 this.hideTarget.classList.toggle(this.displayClass)}
.....

#html

 ....
  <li class="nav_items" data-controller="toggle" > 
      <a href=""  data-action="toggle#toggle" ><i class="far fa-user-circle fa-2x "></i></a>
                            
          <div class="dropnav" data-toggle-display-class="display" data-toggle-target="hide">
                 <a href="" class="drop_down_items" ></a>
                  <a href="" class="drop_down_items">Links</a>
                    .......  

错误信息

Error: Missing attribute "data-toggle-display-class"

我在哪里添加课程？谢谢

Ruby 3.0.3 Rails 7.0.0.alpha2

按照安装和使用说明进行操作后，我启动服务器并收到此错误：Uncaught TypeError: Failed to resolve module specifier "stimulus-autocomplete". Relative references must start with either "/", "./", or "../".

# app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
import { Autocomplete } from "stimulus-autocomplete"
# and tried import { Autocomplete } from 'stimulus-autocomplete/src/autocomplete'

const application = Application.start()
application.register('autocomplete', Autocomplete)

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

我想javascript/helpers/functions.js在刺激控制器中导入和使用文件中的函数。

我尝试用以下方法固定它：

# importmap.rb
pin_all_from "app/javascript/helpers", under: "helpers"

将其添加到资产预编译中：

# asset.rb
Rails.application.config.assets.precompile += ['helpers/*']

我还尝试以application.js不同的方式导入文件（不是一次全部导入）：

// These are all the ways I tried to import the helpers folder in application.js
//= require_tree helpers
import "helpers"
import "./helpers"

在我的刺激控制器中，我像这样导入它

// javascript/controllers/select_controller.js
import {show, hideAll} from "helpers/functions";

据我了解，这应该可以工作，因为 importmap 将其映射到助手名称空间，但我也尝试像这样导入它：

// javascript/controllers/select_controller.js
import { show, hideAll} from "../helpers/functions"

我尝试了上述的各种变体，它在本地开发中运行良好，但每当我在生产中运行应用程序时，文件helpers夹都不会被编译，或者出现 404 错误。

如何在 Stimulus 控制器中正确使用 JS 助手？

我正在尝试将刺激控制器连接到一个表单元素，该元素位于由简单表单 gem 生成的表单内。无论我做什么 - 相应的“数据控制器”属性不会出现在最终呈现的页面中（因此，控制器不会做出反应）...

这是有问题的代码：

<%= simple_form_for book do |f| %>
  <%= render 'shared/form_errors', form: f %>
  ...
  <%= f.association :book_format, label: false, 'data-controller': 'book-format-select' %>
  ...
< % end %>

我也尝试过

<%= f.association :book_format, label: false, data_controller: 'book-format-select' %>

和

<%= f.association :book_format, label: false, html: {data-controller: 'book-format-select' } %>

这些都不起作用 - 输出总是相同的：

<select class="select required" name="book[book_format_id]" id="book_book_format_id">

不确定我做错了什么？

我想切换元素，并且需要一个类名。如何获取stimulus.js 中嵌套元素的类名并更改它？FI，我需要切换最初隐藏的“ul”元素。

div data-controller="my_controller"
  a data-action="click->my_controller#toggle_my_elements"
    | Click
  ul.is-hidden id="my-id" data-target="my_controller.mytext"
    li
      | Text to be toggled.

在刺激控制器中我有：

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ["mytext"]
  toggle_my_elements(){
    console.log("debuggin")  //Ok
    const class_name = this.mytextTarget.className
  }
}

我尝试调用 js 函数className，但似乎 js 函数不再像以前那样工作。我只是不知道如何得到它。

如何使我在 Trix (ActionText) 编辑器中添加的链接在新窗口中使用 target="_blank" 打开链接？

class Post < ApplicationRecord
  has_rich_text :rich_text_content
end

代码示例如下：

<div class="form-floating mb-3" data-controller="home">
    <input type="text"
           class="form-control autocomplete-input"
           id="city" placeholder="Vila Mariana"
           data-home-target="district"
           data-action="keyup->home#autoComplete" />
    <label for="city">Bairro</label>
    <div class="autocomplete-body">
        <ul>
            {#for state in states}
                <li data-home-states-value="{state.uf}"
                    data-home-name-value="{state.name}"
                    data-action="click->home#selectItem">
                    {state.name}
                </li>
            {/for}
        </ul>
    </div>
</div>

该ul:li元素已经在data-controller=home范围内，但无法捕获 li 的值。仅当我声明：

{#for state in states}
    <li
        data-controller="home"
        data-home-states-value="{state.uf}"
        data-home-name-value="{state.name}"
        data-action="click->home#selectItem">
        {state.name}
    </li>
{/for}

我正在迁移到 Rails 7，我觉得有很多变化，但我有信心理解它们并能够升级我自己创建的用于保存个人记录和约会的个人应用程序

更具体地说，我需要在 flatpickr 控制器和 fullcalendar 控制器之间的控制器（@hotwire/stimulus）之间进行通信。这个想法是在从 flatpicr 中选择时跳转到日期

我已经尝试了很多不同的选择，但我真的陷入困境..欢迎任何帮助:)

导轨 7.0.3.1

索引.html.erb

<div data-controller="flatpickr" name="" data-action=""></div>
<div data-controller="calendar">
 <div data-calendar-target="window"></div>
 <turbo-frame id="popup" data-calendar-target="popup"></turbo-frame>
</div>

flatpickr_controller.js

import Flatpickr from 'stimulus-flatpickr'

export default class extends Flatpickr {

  connect() {

    this.config = {

      inline: true,
      enableTime: false,
      time_24hr: false,

      onChange: function(selectedDates, dateStr, instance) {          

        const calendarController = this.application.getControllerForElementAndIdentifier(this.calendarTarget, "calendar")
        calendarController.gotoDate('18-01-2025') //random date

      },
    };
    super.connect();
  }
}

日历控制器.js

import { Controller } from "@hotwired/stimulus";

import { Calendar } from '@fullcalendar/core';
import …

我刚刚将 Rails 6 应用程序更新到 Rails 7，我发现很难将旧的“Vanilla Javascript”代码挂接到 Rails 的Turbo、Stimulus和 ImportMaps 新设置中。

为了使事情变得更容易，我简单地rails new NewAppName在命令行上运行，然后将旧的遗留文件一点一点迁移到新应用程序中。

ImportMap 是由 Rails 为我生成的。我只添加了最后一行来包含我的旧自定义 Javascript 文件。

配置/导入映射.rb：

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

pin_all_from "app/javascript/components", under: "components" # these are the custom JS files from my old Rails 6 app

应用程序/视图/布局/application.html.erb：

<head>
  ... …