how to add javascript event listeners with haskell module in haskell project

Question

I was following a tutorial that has this code found here :

import Web.Scotty
import Text.Blaze.Html5 hiding (map)
import Text.Blaze.Html5.Attributes
import qualified Web.Scotty as S
import qualified Text.Blaze.Html5 as H
import qualified Text.Blaze.Html5.Attributes as A
import Text.Blaze.Html.Renderer.Text
import Database.Persist
import Database.Persist.Sqlite
import Database.Persist.TH
import Data.Text (Text)
import qualified Data.Text as T
import Control.Monad.IO.Class (liftIO)
import Control.Monad.Trans.Resource (runResourceT, ResourceT)
import Database.Persist.GenericSql
import Control.Monad (forM_)
import Control.Applicative
import Control.Monad.Logger

share [mkPersist sqlSettings, mkMigrate "migrateAll"] [persist|
Post
    title String
    deriving Show
|]

runDb :: SqlPersist (ResourceT IO) a -> IO a
runDb query = runResourceT . withSqliteConn "dev.sqlite3" . runSqlConn $ query

readPosts :: IO [Entity Post]
readPosts = (runDb $ selectList [] [LimitTo 10])

blaze = S.html . renderHtml

main = do
  runDb $ runMigration migrateAll    
  scotty 3000 $ do
    S.get "/" $ do
      _posts <- liftIO readPosts
      let posts = map (postTitle . entityVal) _posts
      blaze $ do
        ul $ do
          forM_ posts $ \post -> li (toHtml post)

and I was thinking of expanding this to include click listeners and was wondering how I can achieve this. Thanks!

Answer 1

Now, it's not too much to say that there is no generating JavaScript library in Haskell. So I recommend to write JS in other file. There is a way calling npm or yarn from TemplateHaskell, but it's too black magic.

Anyway, blaze is able to register handler by name .