動態父元素

我有這段代碼，它工作得很好。它根據字段值切換文本輸入字段上的某些樣式。動態父元素

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

我遇到了一些問題，使父元素動態。我想切換文本輸入的父元素上的樣式。我想寫一些但失敗的東西！

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

感謝您的幫助！

來源

2017-06-17 Schoon

'失敗'是什麼意思？一個編譯器錯誤（包括*逐字*和全部*）或運行時錯誤（描述它）？ [你沒有發佈一個完整的程序]（https://stackoverflow.com/help/mcve），所以任何人都幾乎不可能知道你的程序不能工作。 – user2407038

所以'失敗'意味着我想重寫numberInput函數的工作代碼，以便在父DOM節點上設置動態屬性，但我只是非常模糊的想法。我還沒有掌握足夠的反射效果，所以我對如何繼續並且無法提供任何示例代碼或錯誤消息感到有點遺憾。但我有一個非常具體的問題。如何重寫我提供的完美代碼，以便在父DOM節點上設置動態屬性。 – Schoon

「你將如何重寫這段代碼來做X而不是Y」是SO的焦點。我猜你想在'dynAttrs'的rhs中引用'n'，但'n'被綁定在傳遞給'elDynAttr'的參數的內部範圍內。該解決方案可能會從內部範圍返回'n'（以及其他可能需要的內容），並將這些變量再次綁定在外部範圍中：'do {dynAttrs < - .. n ..; （result，n）< - elDynAttr「div」dynAttrs $ do {n < - ..; ..; return（result，n）};返回結果}'。（我對DOM確切地說不太清楚）。 – user2407038

這裏是一個小程序，其中的屬性（右對齊或左）的父元素的依賴於一個子元素的狀態：

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

隨着用戶user2407038提到，我們不得不返回從內部範圍到外部範圍的數字文本元素。然後我們可以使用遞歸的方式來訪問我們稍後在程序中定義的元素。

只要您在數字字段中鍵入字母，它就會跳到右側。

來源

2017-06-21 15:53:59 Jogger

user2407038的提示已經幫助過我了。感謝您編寫解決方案。我不得不圍繞遞歸做... – Schoon

回答

相關問題