Elément parent dynamique

Question

J'ai ce code et cela fonctionne parfaitement. Il bascule certains styles dans le champ de saisie de texte en fonction de la valeur du champ.

numberInput :: (MonadWidget t m) => m (Dynamic t (Maybe Double)) 
numberInput = divClass "form-group" $ do 
    let errorState = "style" =: "border-color: red" 
     validState = "style" =: "border-color: green" 
    rec n <- textInput $ def & textInputConfig_inputType .~ "number" 
          & textInputConfig_initialValue .~ "0" 
          & textInputConfig_attributes .~ attrs 
     let result = fmap (readMay . unpack) $ _textInput_value n 
      attrs = fmap (maybe errorState (const validState)) result 
    return result 

J'ai rencontré des problèmes de dynamisation de l'élément parent. Je voudrais basculer les styles sur l'élément parent de la saisie de texte. Je voudrais écrire quelque chose comme mais échoué!

numberInput :: (MonadWidget t m) => m (Dynamic t (Maybe Double)) 
numberInput = do 
    rec 
     dynAttrs <- -- reference to textInput 
     elDynAttr "div" dynAttrs $ do 
     n <- textInput $ def & textInputConfig_inputType .~ "number" 
         & textInputConfig_initialValue .~ "0" 
     ... 

Merci de votre aide!

Answer 1

Voici un petit programme où les attributs (Aligné à droite ou à gauche) de l'élément parent dépendent de l'état d'un élément enfant:

{-# LANGUAGE OverloadedStrings #-} 
{-# LANGUAGE RecursiveDo #-} 
import Reflex.Dom 
import qualified Data.Text as T 
import Safe 

main :: IO() 
main = mainWidget bodyElement 

bodyElement :: MonadWidget t m => m() 
bodyElement = el "div" $ do 
    el "h2" $ text "Dynamic parent element" 
    numberInput 
    return() 

numberInput :: (MonadWidget t m) => m (Dynamic t (Maybe Double)) 
numberInput = do 
    rec 
     let errorState = ("align" :: T.Text) =: "right" 
      validState = "align" =: "left" 
     let result = fmap (readMay . T.unpack) $ _textInput_value n 
      attrs = fmap (maybe errorState (const validState)) result 
     n <- elDynAttr "div" attrs $ do 
      n1 <- textInput $ def & textInputConfig_inputType .~ "number" 
           & textInputConfig_initialValue .~ "0" 

      text "Some additional control" 
      return n1 
    return result 

En tant qu'utilisateur user2407038 mentionne, nous devons retourner le élément de texte numérique d'une portée interne à l'étendue externe. Ensuite, nous pouvons utiliser do récursive pour accéder à l'élément que nous définissons plus tard dans le programme.

Dès que vous tapez une lettre dans le champ numérique, il va sauter vers la droite.