标签: stimulusjs

我有一个项目列表，每个项目都有一个链接，可以单击进行编辑。当他们单击该编辑链接时，我正在使用刺激使编辑“模态”表单可见。将要编辑的内容的 id 以 id= 的形式出现在列表的相应链接标记上

因此，编辑链接如下所示：

<td>
  <a data-action="click->content#edit"
     data-target="content.editBtn"
     id="<%= url_for(content) %>")>
    Edit
  </a>
</td>

这个想法是刺激控制器中的 content#edit 操作检查并找到它的 id 并使用它来编辑右侧行。

然而，我认为我遇到的问题是，结果该列表的所有行都有一个具有相同名称的数据目标，并且错误的目标（第一个？）绑定到目标。

但是，如果我想通过附加 id 来使每个数据目标不同，现在我在controller.js 中有一个很长的目标列表，所以这是没有意义的。

正确的处理方法是什么？

我目前使用的是 Rails 6.0.4，我想使用 Stimulus 构建一个新页面。在升级到 Rails 7 之前还有很多工作要做，因此如果可能的话，我想在 Rails 6 中使用导入映射和刺激。但到目前为止我还无法让刺激控制器工作。我按照以下步骤操作：

1. 更新 Gemfile 和包：

gem 'importmap-rails'
gem 'stimulus-rails'

2. 跑步rails importmap:install

这给了我config/importmap.rb, 和app/javascript/application.js，它在配置文件中被固定为“应用程序”。

3. 重命名当前application.js文件

我的电流application.js在 inside ，所以我暂时app/assets/application.js.coffee将其重命名为并更新为以下内容：old_application.js.coffeeapplication.html.haml

= javascript_include_tag "old_application", defer: true
= javascript_importmap_tags

这似乎有效，当我渲染页面时，它给了我以下导入映射：

{
  "imports": {
    "application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js"
  }
}

4.运行rails stimulus:install

这给了我里面app/javascript/controllers有index.js,application.js和的文件夹hello_controller.js。

它还更新config/importmap.rb为以下内容：

pin "application", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", …

我想为我的控制器的 CSS 选择器设置一个 const 变量，而不是在整个控制器中对其进行硬编码。我已将声明放入控制器的initialize() 中，但收到错误消息，表明该变量未声明。这样做的正确方法是什么？

目前的尝试

import { Controller } from "stimulus"

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

  initialize() {
    const seasonInputSelector = "input[id$='_season']"
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll(seasonInputSelector)
    // ...
  }

}

错误： ReferenceError：seasonInputSelector 未定义

我一直在使用 DHH 提供的演示来测试 Hotwire。我有一个默认的 rails 6 设置，我知道它从 rails 5 < 资产管道重新创建了 javascript 文件夹结构。我遇到的问题是表单在提交后不会重置文本字段 - 尽管设置了使用此特定操作的刺激控制器。用户提交表单后，如何重置热线表单？我的代码在下面

新的.html.erb

<%= turbo_frame_tag 'new_conversation_comment', target: '_top' do %>
<%= form_with(model: [@conversation, @conversation_comment],
              data: { controller: "reset_form", action: 'turbo:submit-end->reset_form#reset' }, html: {class: 'form-inline'}) do |form| %>
    <%= form.submit 'Post', class: 'btn btn-primary mb-2', style: 'float: right;', 'data-reset_form-target': 'button' %>
  
    <div style="overflow: hidden; padding-right: .5em;">
      <%= form.text_field :content, class: 'form-control' %>
    </div>
<% end %>

_conversation_comment.html.erb

 <div class="p-1">
    <%= conversation_comment.content %>
    </div>

显示.html.erb

  <div class="p-2"> …

我已在现有 Rails 项目中安装了 hotwire-rails。在编写任何与热线相关的代码之前，我在每个页面的浏览器控制台上都会收到以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module在application.debug-86...95.js:53462

错误所指的行是这样的：

import { Controller } from "@hotwired/stimulus"

我使用 Rails 6.1.3.1 和 Sprockets 作为资源，之前我只在使用 webpack 的 Rails 项目中使用过 hotwire，所以不确定这是否与它有关。

嘿，我是 Turbo_streams 的新手，我一直不明白为什么会收到此错误。

属性部分：

<div id="properties"
     data-action="map-marker-clicked@window->@mapmarker#mapMarkerClicked"
     data-controller="mapmarker"
     data-mapmarker-target="properties_list">
  <%= "#{@properties.length} properties" %>

  <%= turbo_stream_from "properties" %>
  <%= turbo_frame_tag "properties" do %>
    <% @properties.each do |property| %>
      <%= render property %>
      <p>
        <%= link_to "View this property", property %>
      </p>
    <% end %>
  <% end %>
</div>

还有我的控制器：

  def index
    @properties = location_search? ? Property::SearchByLocation.call(search_params[:value]) : Property.all

    @markers = Property::GenerateGoogleApiMapMarkers.call(property_or_properties: @properties)

    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace(@properties, partial: 'properties/properties')
      end
    end
  end

更多上下文：我计划从刺激控制器触发此重新加载（当用户单击谷歌地图上的标记时，我想使用标记的坐标刷新属性部分作为组织属性的方式（最接近标记将显示在顶部）。

当我访问 http://localhost:3000/properties 时，出现 ActionController::UnknownFormat 错误

我正在做一个基本的控制器，并尝试从 HTML 中获取带有标签值的数据。

问题是数据总是空的

<div data-controller="selectable">
  <div class="flex" data-selectable-iconurl="test" data-selectable-iconurl-value="test">
     something here
  </div>
</div>

请注意，我对值标签（来自不同的帖子）进行了多种组合，以验证其中一个是否正常工作。

现在，当我尝试访问控制器中的值时始终为空

// selectable_controller.js

import {Controller} from "@hotwired/stimulus"

export default class extends Controller {
  static values = {iconurl: String }

  connect() {
    console.log(this.iconurlValue)
  }

}

我仔细检查了文档，找不到为什么该值没有传递到控制器并且始终为空

我有一个Rails / webpacker / stimulus项目。今天，我将资产管道迁移到了webpacker。除了一个细节，其他一切都很好。

Link_to按钮带有对destroy方法的调用，而直接指向show动作。而且remote：true标记不起作用。不会触发ajax：beforeSend操作，并且不再加载确认框。

<%= link_to sanitize("<i class='fa fa-trash'></i>"), dashboard_manager_dashboard_path(dashboard), remote: true, method: :delete, data: {
                            confirm: "sure?",
                            action: 'ajax:beforeSend->dm--dashboard#onBeforeDelete ajax:success->dm--dashboard#onDelete'
                        } %>

我在Stackoverflow上发现了许多类似的情况，并且大多数人提到Rails UJS的加载不正确，这里似乎也是如此。但是，这些示例中的问题不使用webpack。

Stackoverflow上的一些帖子提到使用button_to而不是link_to。但这不是我想要的解决方案，我希望能够使用remote：true和ajax回调。

有人看到我的设置中的缺陷吗？在此先感谢您的任何建议！

Application.js：

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from 'activestorage';

Rails.start();
Turbolinks.start();
ActiveStorage.start();

import "../src/import-jquery";
import 'bootstrap/dist/js/bootstrap';
import 'tempusdominus-bootstrap-4';
import '../src/bootstrap-select.js';
import '../src/custom_calender.js';
import '../src/functions.js';

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start();
const context = require.context("controllers", true, …

我在模态中有一个带有 3 个输入的表单。前两个是小时，当第一个小时发生变化时，我需要更新第二个小时的值。

我已成功将 Stimulus 控制器连接到表单，并且可以在控制台中显示它。这是我的控制器代码：

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ 'hour_start', 'hour_finish' ];

  connect() {
    console.log(this.hour_startTarget);
  }

  update() {
    alert('Changed');
  }
}

连接工作正常并在控制台上打印：

<input class="form-control string required form-control datetimepicker" data-target="dtpicker.hour_start" data-action="change->dtpicker#update" required="required" aria-required="true" type="text" name="order[hour_start]" id="order_hour_start">

但是当我更改此输入的值时，警报不会弹出......

我还尝试忽略更改，因为它是输入的默认操作，但警报仍然没有显示。

还尝试在 js 上使用普通事件监听器，如下所示：

const handleHourStart = () => {
  let hourStart = document.getElementById('order_hour_start'); 
  hourStart.addEventListener('change', () => {
    alert('Changed');
  })
}

但还是不行。奇怪的是，点击事件的行为符合我的预期，但变化却没有......

有任何想法吗？

我正在尝试通过 .Stimulus 控制器监听 Select2 事件data-action。

我有一个刺激控制器，其中包含了 Select2 事件的事件侦听器，但我无法侦听 HTML 中的 Select2 事件。

import { Controller } from 'stimulus';

export default class extends Controller {
  initialize() {
    const $element = window.$(this.element);

    $element.select2({
    });

    $element.on('select2:select select2:unselect', (_event) => {
      this.element.dispatchEvent(new Event('change'));
    });
  }
}

我必须使用 Stimulus 属性监听“change”事件data-action，而不是“select2”事件。以下代码有效。通过收听data-action-"select2:select"不起作用。

<%= f.select :name, ['name1', 'name2'], data: {'controller' => 'select2'} %>

我想监听具有该data-action属性的事件，因为旨在使用刺激。

我可以使用 Stimulus 监听 Select2 事件吗？