DEV Community
·
使用 Stimulus 实现目标元素的连接和断开回调
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
这篇文章介绍了使用Stimulus控制器的Connect和Disconnect回调函数来跟踪目标元素的添加和移除。通过示例代码演示了如何在列表中添加新的元素，并在页面加载时更新元素数量。这是Stimulus的一个小而实用的功能。
🎯
关键要点
- 文章介绍了Stimulus控制器的Connect和Disconnect回调函数，用于跟踪目标元素的添加和移除。
- 通过示例代码展示了如何在列表中添加新的元素，并在页面加载时更新元素数量。
- 使用targets可以通过名称引用重要元素，示例中展示了如何设置和使用targets。
- 扩展控制器以添加新功能，允许用户在列表中添加更多的鸡蛋元素。
- 代码示例中展示了如何更新列表中鸡蛋的数量，并在目标元素连接和断开时更新显示。
- Stimulus的这个小功能在实际开发中非常实用，能够有效管理动态元素。
❓
延伸问答
Stimulus的Connect和Disconnect回调函数有什么作用？
Connect和Disconnect回调函数用于跟踪目标元素的添加和移除。
如何在Stimulus中添加新的目标元素？
可以通过在控制器中使用insertAdjacentHTML方法来添加新的目标元素。
如何更新列表中元素的数量？
通过itemTargetConnected和itemTargetDisconnected回调函数来更新元素数量。
Stimulus的targets是什么？
targets允许通过名称引用重要元素，便于在控制器中管理这些元素。
在Stimulus中如何显示当前元素数量？
可以在控制器中使用countTarget来显示当前元素数量，并在元素连接或断开时更新。
Stimulus的这个功能在开发中有什么实际应用？
这个功能可以有效管理动态元素，提升用户交互体验。
➡️
