stimulus.js 使用筆記

2022-12-13



在Javascript無數的框架中,Stimulus.js算是比較彈性且可模塊化管理的JS框架,使用上僅需引入Stimulus的基礎框架,然後用ES6模塊化的方式來寫模塊引入主入口JS文件即可直接使用,不用再建構。
但是基於模塊化的語法仍然尚未普及,Stimulus官方還是有提供使用Webpack等建構的方式,關於安裝的部分,可以參考: 

安裝Stimulus.js


本文不是Stimulus.js的使用教學,只會紀錄我在使用上的一些紀錄,如有任何相關使用上的經驗,歡迎一起交流討論喔!

DispatchEvent

<div data-action="updateRange@window->filters#rangeFilter">自訂觸發事件</div>

window.dispatchEvent(new CustomEvent("updateRange", {
                        detail: {
                            key: key,
                            range: range,
                            total: item
                        }
}))
由於發現stimulus的事件是有針對性的,任何dom要透過事件處發來調用stimulus的method,一定都要是"人為"觸發,才會有效。如果是透過js操作dom來修改內容等操作,是沒用的。

由於我需要透過一些Jquery包好的UI效果,透過裡面的事件來執行stimulus的method,所以我找到兩種方法可以使用,其中一種就是"自訂觸發事件"

透過自訂觸發事件,我們可以直接執行stimulus controller 內的 method。如需要傳遞參數,則可透過定義detail物件來進行資料傳遞。

 

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【640328】
digishot webdesign studio