标签: stimulusjs

如何在 Twig 中渲染 Stimulus 控制器?

我认为这是一个简单的问题,但我不明白为什么会发生:

当我以这种方式在 Twig 中添加刺激组件时:

{{ stimulus_controller('test')}}
Run Code Online (Sandbox Code Playgroud)

它呈现文本: data-controller="test"

当我使用

{{ stimulus_controller('test')}}
Run Code Online (Sandbox Code Playgroud)

控制器完美呈现。

是否需要进行调整设置来激活此树枝扩展?我没有通过这种方式找到任何东西,并且我的 IDE 很好地识别了该扩展,这将我置于扩展声明中。

symfony twig stimulusjs

1
推荐指数
1
解决办法
3610
查看次数

Rails 7 从浏览器客户端查看并直接上传图像

我已经很长一段时间没有使用 Rails 作为 Web 应用程序的前端了,我当然想使用最新的版本,但似乎发生了很多变化,我不知道哪个是最Rails 的方式不再这样做了。

我尝试过使用 JQuery 和 FileUpload 插件,但我们不再有 JQuery,我的意思是我尝试添加它,但使用新的导入映射很麻烦(我知道这是个问题如果我查找一些教程,我可以做 i),但这似乎违背了 Rails 应用程序中 JS 当前的心态。

然后我去检查新的 Hotwire + Stimulus,但我什至现在不知道从哪里开始,但从我所看到的一点来看,我不知道是否会处理这种情况:我已经presigned_url从我的 中获得了一个S3 Bucket,并且只是有一个表单,f.file_field我想直接从客户端浏览器上传此文件以S3执行POST请求,这样用户就不会被阻止等待上传完成

如果我错了,请纠正我,但要触发 JS 函数,Rails Way 现在是使用Stimuluswith HTML Data Attributes,但我不确定是否可以在此数据属性中传递文件。

查看其他教程,我开始认为最好的方法是使用 aturbo_stream_tag来包装我的表单,然后在提交表单时将点击这个 Turbo 控制器,它将充当 ajax 请求,异步运行,使用Net:HTTP或执行发布请求甚至s3宝石本身,我只是不确定我是否有权访问该文件。

有好心人来澄清一下吗?感谢并抱歉发了这么长的帖子。

ruby-on-rails stimulusjs hotwire-rails ruby-on-rails-7

1
推荐指数
1
解决办法
4108
查看次数

如何在 Rails 7 的表单选择中包含类和数据属性?

在我的 Rails 7 应用程序中,我使用 Stimulus,需要data向表单添加属性select以将其链接到 JavaScript 控制器。我还尝试使用class.

这是表单选择元素:

<%= f.select(:repeat, Batch.repeats, {class: "class_name"}, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}) %>
Run Code Online (Sandbox Code Playgroud)

上面的代码导致data属性被应用到选择字段,但保留了classout。

我还尝试翻转classdata属性,如下:

<%= f.select(:repeat, Batch.repeats, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}, { class: "class_name" }) %>
Run Code Online (Sandbox Code Playgroud)

结果与第一种方法相反:这一次,field按类设置样式,但数据属性不与select元素关联。

根据这个问题,我意识到:

selecthelper 采用两个选项哈希,一个用于 select,第二个用于 html 选项。因此,您所需要做的就是在项目列表之后提供默认的空选项作为第一个参数,然后将您的类添加到 html_options.

从那里开始,我认为我需要在第一个选项哈希中包含 theclass和 thedata属性,并将第二个选项哈希保留为空,如下所示:

<%= f.select(:repeat, Batch.repeats, …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails drop-down-menu stimulusjs

1
推荐指数
1
解决办法
1249
查看次数

为什么我的手风琴无法使用 HTML 和 Stimulusjs 运行

请让我需要帮助来使这个手风琴工作,我对 StimulusJS 不太熟悉。第一个手风琴工作正常,但其余的没有反应。我在这里附上了一段代码,请让我知道我做错了什么,谢谢。

script 标签包含stimulusjs 代码。请留下您的意见,我将不胜感激。

<script src="https://cdn.tailwindcss.com"></script>
<script type="module">
    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
    window.Stimulus = Application.start()

    Stimulus.register("dropdown", class extends Controller {
     static targets = ["background", "drop", "expand", "button"];
    static values = { accordionValue: Number };
    connect() {
        console.log("Drop Down connected");
    }

    initialize() {
        this.isOpen = true;
    }

    onToggle = (e) => {
        Array.prototype.forEach.call(this.buttonTargets, function (element, index) {
            element.addEventListener("click", function () {
                console.log(index)
            })
        })
        this.isOpen ? this.show() : this.hide();
        this.isOpen = !this.isOpen;
    };

    show() {
        this.dropTarget.className …
Run Code Online (Sandbox Code Playgroud)

stimulusjs stimulus-reflex

1
推荐指数
1
解决办法
1169
查看次数