Dynamisches Elternelement

Question

Ich habe dieses Stück Code und es funktioniert einwandfrei. Je nach Feldwert werden einige Stile im Texteingabefeld umgeschaltet.

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 

lief ich in einige Probleme das Element dynamische Eltern zu machen. Ich möchte die Stile im übergeordneten Element der Texteingabe umschalten. Ich möchte etwas schreiben wie, aber gescheitert!

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" 
     ... 

Vielen Dank für Ihre Hilfe! Hier

Answer 1

ist ein kleines Programm, in dem die Attribute (rechts oder links ausrichten) des Elternelements abhängig von dem Zustand eines Kindes Element:

{-# 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 

als Benutzer user2407038 erwähnt, haben wir die Rückkehr numerisches Textelement von einem inneren Bereich zum äußeren Bereich. Dann können wir rekursives tun, um auf das Element zuzugreifen, das wir später im Programm definieren.

Sobald Sie einen Buchstaben in das numerische Feld eingeben, springt er nach rechts.