在 Ruby on Rails 中使用 Stimulus 学习的最佳方式是通过构建一个 Toggle。这是一个相对简单的组件,可以帮助我们掌握 Stimulus 的基础知识。

Toggle 可以让我们实现一个切换开关,在单击时切换对象的状态。例如,我们可以用 Toggle 来创建一个开关灯的按钮,每次点击都会切换灯的状态:开或关。另外,我们还可以通过 Toggle 来切换文本的显示状态,将隐藏的文本内容展开并隐藏。

首先,我们需要创建一个控制器。在 Rails 中,控制器是我们用来处理请求和响应的类。使用 Stimulus 时,我们创建的控制器会与特定的 HTML 标记绑定,我们可以在其中添加方法以便响应用户的交互动作。

然后,在控制器中添加“connect”方法和“toggle”方法。前者表示控制器与标记绑定时会被调用,而后者则是处理交互动作的方法。在这个例子中,我们创建的 Toggle 控制器将会响应用户的单击事件,并切换与之绑定的标记的状态。

在我们创建完控制器后,我们需要创建一个包含 Toggle 的 HTML 片段。该片段应该包含一个用于切换状态的元素,以及一个我们需要切换状态的目标元素。在这个例子中,我们将使用一个按钮元素,它的单击事件会触发 Toggle 控制器来切换目标元素的显示和隐藏状态。

最后,我们将把控制器和 HTML 片段连接起来,以确保它们能够互相协作。我们使用“data-controller”属性来告诉 Rails,哪个控制器与 HTML 片段绑定。我们还使用“data-action”属性指定触发控制器的事件,以及要调用的方法。

这就是基本的 Toggle 组件的构建方式。Stimulus 是一个非常灵活而强大的框架,通过学习构建 Toggle,您可以了解和掌握基础的 Stimulus 使用方法。从这里开始,您可以尝试构建更复杂的组件,并进一步提升您的技能水平。

详情参考

了解更多有趣的事情:https://blog.ds3783.com/