1

我们正在研究将 Stimulus.js 与我们的 Rails6 应用程序一起使用，并在将我们的思维从 jQuery 转移到 Stimulus 时不断遇到概念障碍。

例如：

在页面的某一部分我们有一个按钮，当单击该按钮时，我们希望将内容加载到页面另一部分的 div 中。在 jQuery 中，这很简单 - 响应click事件，将 rails 后端的部分加载到该 div 中。

在刺激，如何做到这一点？看起来一切都需要在一个大控制器中，以便按钮可以看到“目标 div”。所以本质上我们正在编写“页面”控制器，这似乎有很多开销。此外，它搞乱了我们将页面分解为部分的方式，因为现在这些部分需要共享一个 Stimulus 控制器。

4

2 回答 2

0

您绝对不需要编写“页面”控制器。这个想法是你为交互元素编写更小的控制器。如果您发布更多关于您的用例的信息，也许我们可以帮助您拆分控制器。尽管控制器的元素必须包含注册为目标的任何元素，但您是正确的。请记住，您可以使用常规 Javascript 访问该上下文之外的元素（例如，在页面的完全不同部分）（换句话说document.getElementById，您可以像使用 Stimulus 目标一样轻松访问）

不过，要回答您的问题，您可以执行以下操作：

  show() {
      fetch("/path/to/partial")
        .then((res) => res.text())
        .then((html) => {
          const fragment = document
            .createRange()
            .createContextualFragment(html);

          this.element.appendChild(fragment);
          // OR document.getElementById("testy_element").appendChild(fragment)
        });
     
  }

它的作用是从 Rails 服务器获取 HTML 响应并将其插入到主控制器的元素 ( this.element) 中。例如：

<div class="container" data-controller="test">
  <button data-action="test#show">Do the Thing</button>
  <!-- partial would appear here -->
</div>
于 2021-11-03T17:20:57.810 回答
-1

您正在寻找的是 Stimulus 的同级库Turbo，用于通过 turbo-frames 处理 HTML 导航并通过 turbo-streams 部分更新页面。

于 2021-02-02T10:13:33.913 回答