在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物件來進行資料傳遞。