问题标签 [stimulusjs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
ruby-on-rails - 带有 Turbolinks 的 StimulusJS,必须等待“turbolinks:load”事件才能执行 StimulusJS 控制器
我有一个相当标准的 Rails 5.2 应用程序(几乎遵循所有约定),使用 yarn 和 webpacker,1.1.1
在我的package.json
和yarn.lock
文件中有刺激版本。
从 StimulusJS Discourse 页面 ( https://discourse.stimulusjs.org/t/stimulusjs-and-turbolinks/669 ),从 Stimulus 开始1.1
,刺激控制器在 DOM 准备好 turbolinks 后执行连接/初始化方法。
但是,我可以让下面的控制器正确执行的唯一方法是添加事件处理程序以等待turbolinks:load
事件触发。
如果它是相关信息,我正在尝试使用 jQuery Select2 插件来创建自定义选择元素。
HTML 表单:
我在设置带有 turbolinks 的刺激控制器时遗漏了什么吗?
使用turbolinks:load
事件处理程序,我可以获得我想要的功能,但从我在 Discourse 论坛上阅读的内容来看,我不应该使用事件处理程序。
我的应用程序是否有可能“缓存”了旧版本的刺激,即使package.json
另有说明?
javascript - 刺激控制器:多次监听事件;如何删除事件侦听器并保留上下文?
我的 HTML 页面上有以下控制器:
此子控制器映射到以下child_controller.js
类:
如您所见,connect()
Stimulus 控制器上有一个事件侦听器,当它检测到事件被触发时,它会记录该事件并操作 span 目标。
当我myDiv
从以下内容替换目标的内容时出现问题parent_controller.js
:
现在myEvent
启动了,事件侦听器不是一次,而是两次(因为同一个事件被记录了两次)。每次后续替换子 HTML 时,事件都会比以前多记录一次。
我知道可以利用它document.removeEventListener
来防止旧控制器仍然监听事件:
但是这样做会使该handleMyEvent
方法失去 the context
,因为它不再找到mySpanTarget
under this
。
如何从我已经无法访问的子控制器中删除侦听器,因为它不再在 DOM 中,同时保留上下文?
javascript - 在 Stimulus 控制器中使用 querySelectors 检索动态元素的问题
在我的控制器中查询元素时,我无法检索我想要的元素,即使当我在浏览器控制台中运行相同的代码时它也能完美地找到它们(title1
例如,我可以看到 id 在我的 Inspector 中)。从这个意义上说,我想知道是否缺少一些关于如何在特定元素不是静态时检索特定元素的刺激信息,或者为什么刺激不喜欢 querySelectors。
代码如下:
一)在app/views/legislations/show.html.erb
:
b) 在app/javascript/controllers/slideshow_controller.js
:
任何指导/帮助表示赞赏!
webpack - 在 Rails 6 中使用 Stimulus 和 webpacker 的 Select2
我最近更新到 rails 6 并使用 webpacker 和刺激。它使许多功能更容易使用 turbolinks,但我无法弄清楚如何使一些 select2 gem 与刺激和 webpacker 一起工作,并且当我尝试将它导入我的 application.js 文件时不断出错。寻找正确方向的点以启动并运行 select2。
javascript - Turbolinks、动态导入(file.js)、d3 重新加载
复制:https ://glitch.com/edit/#!/noisy-wax
我将 Stimulus 与 Turbolinks 一起使用,我需要在控制器中动态导入许多 js。
我使用的代码main.js
是:
问题
如果我导航到/about
图表第一次出现。
然后我导航到/index
.
当我回到/about
页面时,d3
图表会自行重新加载(您可以通过 turbolinks 在预览页面后看到闪烁)。
如何避免重新加载?
在这一个中,我没有使用动态导入,也没有重新加载:https ://glitch.com/edit/#!/mud-shop
javascript - 选择更改时替换嵌套表单项?(Rails / AJAX / StimulusJS)
我有一个带有预填充嵌套表单的标准 Rails 应用程序。我在父模型上有一个选择,当用户更改嵌套项的上下文并且需要清除并重新填充它们时。
我一直在使用 StimulusJS 并想要这样的东西:
我正在接近那里 - 当我更改选择时,行被删除。我可以用这个手动插入一个新行:
因为我已经用我的新行结构定义了。
我似乎遇到的问题是将 Stimulus 调用嵌入 Rails.ajax 函数中。我得到 Uncaught TypeError: Cannot read property 'innerHTML' of undefined errors。我确信这是一个可变范围类型问题。Javascript 不是我在这里的强项,所以我怀疑我在这里遗漏了一些很容易修复的小东西。
相关问题:
同时,在我的一个模板列单元格中,我需要添加一些文本并从 Rails.ajax 调用的数据中设置隐藏输入的值。我可能会自己解决这个问题,但如果有人可以添加到那个附带问题,我将不胜感激。
webpack - 如何通过 CDN 将 ArcGIS Javascript API 包含在 Webpack 中以与 Stimulus 一起使用?
在 ArcGIS javascript api 的快速入门指南中,它具有以下示例代码:
这适用于简单的网页。但是,我使用的是 Blazor(服务器端),我想将(上面的)代码封装到 Blazor 组件中。所以我遇到了第一个绊脚石——我不允许<script>
在 Blazor 组件中添加标签。那是因为可以随时动态创建控件。所以我想我会用刺激来解决这个问题。
这是我的 Blazor 组件(到目前为止)。我有一个名为Map.razor
:
我添加了该ShouldRender
方法,以便组件仅呈现一次(添加时)。这就是我想要在我的刺激控制器中实现的目标map-controller.js
:
最初,我尝试添加 ArcGIS,以便使用 Webpack 构建它(这样上面的代码就可以工作)。但是,我遇到了 ArcGIS javascript api 和 tailwindcss 之间的兼容性问题。ArcGIS 无法编译,因为调用require('fs')
.
我没有解决这个require('fs')
问题(这超出了我现有的经验),而是选择通过 CDN 引入 ArcGIS js。所以我尝试使用external
Webpack 中的配置功能来设置 ArcGIS。这是我的webpack.js.config
文件:
这就是我在刺激控制器中所做的:
但是,我在浏览器中看到以下异常:
正如您可能已经猜到的那样,我的 javascript/webpack 知识已经达到极限。我确实对 ArcGIS javascript API 以及它是否支持 commonjs 做了一些研究。显然它使用了支持 AMD 的 Dojo。所以我尝试了以下配置:
但我得到同样的错误。我已经阅读了 webpack文档——我不清楚我应该如何配置它。我在做一些根本错误的事情吗?
javascript - 如何将 jQuery 代码翻译成 Vanilla JS
我通常使用 jQuery 作为完成工作的拐杖,然后继续处理下一个问题。然而,随着向 Rails 6 引入 Stimulus,我希望能够更好地编写 vanilla JS。我在重写以下$.map
和$.each
行时遇到了困难:
我自己的尝试并没有真正奏效。
javascript - 嵌套的 StimulusJS 范围/控制器问题/HTML 5 模板标签
我有一个带有嵌套关联的基本 Rails 应用程序,我正在做一个标准的“行项目”类型视图,我在其中动态添加和删除模板标签中的行。我有一个触发 AJAX 调用以替换所有嵌套行选择的选择(上下文已更改)。支出控制器处理整个表单,嵌套表单控制器用于其他页面来处理行的添加和删除:
它工作正常。我可以添加和删除行,如果我更改expenditure.budget
选择,所有expenditure.budgetItemSelect
目标都会更新,除了模板内的目标。就好像它在控制器的整个范围内都丢失了。我之前将它们嵌套,但现在将它们放在同一个 divdata-controller="expenditure nested-form"
中进行仔细检查,它仍然无法正常工作。检查拼写,甚至尝试删除data-target="nested-form.template"
. 浏览器控制台中没有错误。我在这里遗漏了一些明显的东西吗?
更新
嗯......似乎该template
标签是只读的,而不是 DOM 的一部分,这就是失败的原因。
我管理了一个 hack,我替换了整个模板的内容,但这似乎破坏了添加/删除行 ♂️ 的控制器。
更新 2
我找到了一种解决方法-如果有人可以改进此代码,我将接受此作为更好的答案。