在 Rails link_to 中正确声明 Stimulus Target

本文旨在解决在 Rails 应用中使用 Stimulus.js 时，如何正确地在 link_to 辅助方法中声明和使用 target。我们将通过一个倒计时的例子，讲解如何将 link_to 元素与 Stimulus controller 关联，并解决常见的 "Missing target element" 错误。本文将提供清晰的代码示例和详细的解释，帮助你更好地理解和应用 Stimulus.js。

Stimulus Target 声明与使用详解

在使用 Stimulus.js 构建交互式 Rails 应用时，正确地声明和使用 target 至关重要。Target 允许 controller 直接与 HTML 元素交互，从而实现动态更新和行为控制。本文将通过一个倒计时的例子，详细介绍如何在 Rails 的 link_to 辅助方法中正确声明和使用 target，避免常见的错误。

问题分析

在提供的示例中，开发者尝试在 link_to 元素上实现一个倒计时功能，但遇到了 "Missing target element" 错误。主要问题在于 target 的声明方式和 controller 的作用域。

解决方案

解决此问题的关键是将所有相关的 HTML 元素包裹在一个具有 data-controller 属性的父元素中，然后在这个父元素上声明所有 target。

HTML 结构：

人声去除

用强大的AI算法将声音从音乐中分离出来

23

查看详情

<span data-controller="countdown">
  <span data-countdown-target="countdown"></span>
  <%= link_to "close", "#", data: { countdown_target: "link" } %>
</span>

解释：

• data-controller="countdown": 这定义了 Stimulus controller 的作用域。所有子元素都将在这个 controller 的上下文中运行。
• <span data-countdown-target="countdown"></span>: 这声明了一个名为 countdown 的 target，可以在 controller 中通过 this.countdownTarget 访问。
• <%= link_to "close", "#", data: { countdown_target: "link" } %>: 这使用 Rails 的 link_to 辅助方法创建了一个链接，并声明了一个名为 link 的 target。注意 data: { countdown_target: "link" } 的写法，它将链接元素注册为 controller 的 link target。

Stimulus Controller 代码：

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["countdown", "link"];

  connect() {
    this.startCountdown();
  }

  startCountdown() {
    let remainingTime = 8;
    this.updateCountdown(remainingTime);

    const countdownInterval = setInterval(() => {
      remainingTime--;
      this.updateCountdown(remainingTime);

      if (remainingTime <= 0) {
        clearInterval(countdownInterval);
        this.hideCountdown();
        this.enableLink();
      }
    }, 1000);
  }

  updateCountdown(remainingTime) {
    this.countdownTarget.innerText = remainingTime;
  }

  hideCountdown() {
    this.countdownTarget.style.display = "none";
  }

  enableLink() {
    this.linkTarget.classList.remove("isDisabled");
    this.linkTarget.classList.add("link");
  }
}

解释：

• static targets = ["countdown", "link"];: 这声明了 controller 使用的 target。必须在这里声明，才能在 controller 中通过 this.countdownTarget 和 this.linkTarget 访问。
• this.countdownTarget: 引用了 data-countdown-target="countdown" 的元素。
• this.linkTarget: 引用了 data: { countdown_target: "link" } 的链接元素。

进一步优化

• 使用 this.element: 如果需要在 controller 中引用 data-controller 属性的元素本身，可以使用 this.element。例如，可以添加一个 target 到 controller 元素本身，然后通过 this.element 来访问它。

注意事项

• Target 命名: target 的命名应该具有描述性，以便于理解其作用。
• Controller 作用域: 确保所有相关的 HTML 元素都在同一个 data-controller 属性的作用域内。
• Target 声明: 必须在 controller 的 static targets 数组中声明所有使用的 target。

总结

通过将相关的 HTML 元素包裹在一个 data-controller 属性的父元素中，并在父元素上声明所有 target，可以有效地解决 "Missing target element" 错误，并实现 Stimulus.js controller 与 Rails link_to 元素的无缝集成。 理解 Stimulus 的作用域和 target 的声明方式是构建健壮的交互式 Rails 应用的关键。

以上就是在 Rails link_to 中正确声明 Stimulus Target的详细内容，更多请关注php中文网其它相关文章！