ruby-on-rails 加载带有选定OnChange事件的turbo帧?

p3rjfoxz  于 2023-06-07  发布在  Ruby
关注(0)|答案(3)|浏览(113)

我有一个嵌套窗体,其中嵌套窗体项以主窗体中的选择为条件。我有一个涡轮框架形式的嵌套部分。我有手动链接来更新框架如下:

<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>

而不是链接,我希望现有的选择,我必须动态地重新加载该框架的变化。
我发现了这个:https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441,给出如下解:

let frame = querySelector(‘turbo-frame#your-frame’)
frame.src = ‘/my/new/path’
frame.reload()

我仍然在寻找一个直接优雅的一行程序,如onChange...与什么看起来像一个完整的刺激控制器等。

ct3nt3jp

ct3nt3jp1#

@Brendon把我带到了那里,但这里有一个非常简单的涡轮+刺激的例子。从下拉列表中筛选当前索引集合。

// app/javascript/controllers/select_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  connect() {
    
  }

  change(event) {
    const frame = document.getElementById('posts');
    frame.src=event.target.value;
    frame.reload();
  }
}

然后呢

<%# app/views/posts/index.html.erb %>
<select 
    data-controller="select"
    data-action="select#change">
    <option value="<%= posts_path(filter: 'unpublished') %>">Unpublished</option>
    <option value="<%= posts_path(filter: 'archived') %>">Archived</option>
    <option value="<%= posts_path(filter: 'featured') %>">Featured</option>
</select>

<%= turbo_frame_tag :posts do %>
  <%= render posts %>
<% end %>
pexxcrt2

pexxcrt22#

您可以从网页上的某些元素触发事件:
1.将turbo-frame添加到您的网页:

<turbo-frame id="my-frame" src="/my/path">
 </turbo-frame>

1.添加一个输入元素,比如一个按钮,在页面的某个地方使用onclick()

<input class="btn" name="123" id="btn" onclick="update_my_frame(name)">

1.在onclick()触发的JS函数中,可以加载/重载turbo帧:

<script>
     update_my_frame(name) {
     // console.log(name);
     let frame = document.querySelector('turbo-frame#my-frame')
     frame.src = '/my/path' // => loads turbo-frame
     // ...
     frame.src = '/my/new/path'
     frame.reload() // => reload turbo-frame with updated src
 }
 </script>
km0tfn4u

km0tfn4u3#

<select 
    onchange="
        const frame = document.getElementById('my-frame');
        frame.src=event.target.value;
        frame.reload();"
>
    <option value="/examples">Examples</option>
    <option value="/help">Help</option>
    <option value="/faq">FAQs</option>
</select>

相关问题