1

我基本上是在关注这个 GoRails 剧集：https ://gorails.com/episodes/datatables-from-scratch-using-hotwire

对表单的更改projects按预期更新框架。我的模态过滤器效果很好。以前我在表单下方projects有框架。但是，该内容不会通过 Turbo 更新。我将模态嵌套在涡轮框架中，并将涡轮框架嵌套在表单中。

这现在很好用 - 模型内容得到更新，除了现在当涡轮更新时，hidden类被重新应用，模态“关闭”并且模态背景保持显示在页面上。我希望模态保持打开状态，以便用户可以选择多个过滤器，然后点击esc键或模态按钮将其关闭。

<form data-sort-target="form" data-turbo-frame="projects" data-turbo-action="advance" action="" accept-charset="UTF-8" method="get">
  <input placeholder="Search..." oninput="this.form.requestSubmit()" class="form-control" type="search" name="query" id="query">
  <turbo-frame data-turbo-action="advance" id="projects">
    <div class="modal hidden">
      <h4>Status</h4>
      <div class="m-l-md">
        <input onchange="this.form.requestSubmit()" type="checkbox" value="active" name="status[]" id="status[]">
        Active (77)
      </div>
      <div class="m-l-md">
        <input onchange="this.form.requestSubmit()" class="form-control" type="closed" value="green" name="status[]" id="status[]">
        Closed (74)
      </div>
    </div>
    <!-- index partial -->
  </turbo-frame>
</form>

开放其他方法来实现这一点 - Turbo / Hotwire 的新手，所以我可能会在这里遗漏一些简单的东西。

4

1 回答 1

1

这听起来像是data-turbo-permanent属性的完美用例，它将在整个页面加载过程中保持元素的状态。

于 2022-02-22T16:05:45.060 回答