Update list of n UI values

Question

I'm looking for a way to update an arbitrary number of UI.inputs based on a valueChange in any of the inputs.

Here is a toy example with just two inputs:

import qualified Graphics.UI.Threepenny as UI
import Graphics.UI.Threepenny.Core
import Graphics.UI.Threepenny.JQuery

main :: IO ()
main = do 
     startGUI defaultConfig setup
     return ()

setup ::  Window -> UI ()
setup w = do 
            textboxes <- do
              tb1 <- UI.input 
              tb2 <- UI.input
              update1 <- stepper "red" $ UI.valueChange tb1
              update2 <- stepper "green" $ UI.valueChange tb2
              element tb1 # sink value (fmap reverse update2)
              element tb2 # sink value (fmap reverse update1)
              return $ column [return tb1, return tb2]

            getBody w #+ [textboxes]
            return ()

Whatever is written in one of the textboxes is copied (reversed) into the other text box.

Now, what if I wanted to have a list of an arbitrary length of input UIs, and any thing written into any of the inputs is copied into all of the other ones? I can create a list of UIs easily enough, but how do I read them all, apply a function to their input (like reverse) and then sink the change into all the other ones?

Any thoughts?

Answer 1

I'm not familiar with pretty much anything you mentioned, but would you be able to make use of the monadic structure and some standard functions to do something like this:

textboxes <- do
  tbs <- replicateM 3 UI.input
  forM_ tbs $ \tbX -> do
    update <- stepper "_" $ UI.valueChange tbX
    forM_ tbs $ \tbY -> do
      element tbY # sink value (fmap reverse update)
  return $ column (map return tbs)

The stepper argument is static and I think you would need a way to skip the triggering control when updating, but in terms of generalizing from two controls to a list of controls I think this might be the right direction?