加载一个带有选择OnChange事件的Turbo框架？

Question

我有一个嵌套表单，其中嵌套表单项基于主表单中的选择是有条件的。我把表单的嵌套部分放在了Turbo Frame中。我使用手动链接来更新该框架，如下所示：

<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... 一样，而不是看起来像完整的刺激控制器等。

- Dan Tappin

---

你解决了这个问题，还是采取了其他方向？我也遇到了同样的问题。 - viktorsmari

Answer 1

@Brendon的回答很中肯，这里给出一个使用Turbo和Stimulus的非常简单的例子。从下拉列表中筛选当前索引集合。

// 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 %>

- Ryan Romanchuk

---

我认为你不需要使用frame.reload()。因为设置frame.src已经触发了Turbo Frame的更新，再调用reload()会导致客户端错误，因为第一个请求被取消了。用户界面可以正常工作，但控制台中会出现错误。 - user137717

Answer 2

您可以从网页上的某些元素触发事件：

1. Add turbo-frame to your webpage:

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

2. Add an input element, say a button, somewhere on the page with onclick():

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

3. In the JS function triggered by onclick(), you can load/reload the turbo frame:

    <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>
   

- Nitin Nain

Answer 3

<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>

- Brendon