haskell - 如何有效地对 Reflex.Dynamic 中的值进行分支？

Question

假设我有一些应用程序状态，在某个后端系统上维护。看起来像这样

data MyState = State1 MyState1 | State2 MyState2

data MyState1 = MyState1 { ms1_text :: Text, ms1_int :: Int }
data MyState2 = MyState2 { ms2_bool :: Bool, ms2_maybe_char :: Maybe Char }

我还有一个从后端系统获取最新状态的功能

getLatestState :: IO MyState

我很确定我可以通过反复查询后端来弄清楚如何将其打包成动态，这样我就有了

dynMyState :: MonadWidget t m => Dynamic t MyState

我想把它渲染成 html。我希望数据结构的每个部分都呈现给一个 div。但是，根本不应该渲染不存在的东西 - 所以，当 ms2_maybe_char是 Nothing ，应该没有 div ，当 MyState是 State1 , State2 应该没有 div .

为了清楚起见，举几个例子:

State1 (MyState1 "foo" 3)

变成

<div class=MyState1>
    <div>foo</div>
    <div>3</div>
</div>

和

State2 (MyState2 False Nothing)

变成

<div class=MyState2>
    <div>False</div>
</div>

理想情况下，只应在必要时修改 DOM 的每个部分 - 所以如果 ms2_maybe_char从 Nothing 更改至 Just 'a' ，则需要创建一个新的 div。或者如果 ms1_text从 "foo" 更改至 "bar" ，那么我们需要在 DOM 中更改该字符串。但是，更改 ms1_text绝不应该导致重绘兄弟节点或父节点。

我应该如何构建我的代码？考虑到 getLatestState，这是否可能？ api作为构建 block ？通过尝试构建单个 Dynamic，我是否完全错过了 Reflex 的意义？值(value)，我需要重新考虑我的方法吗？

特别是，第一个绊脚石是我无法轻松检查 Dynamic 以了解它是否包含 State1 或 State2。我可能会使用 dyn或 widgetHold在这里，和 fmap超过 dynMyState 的函数它可以将状态视为简单值并生成 m ()绘制整个事物的 Action 。但是，然后我失去了所有的共享——整个 UI 将在每次状态更改时从头开始重新绘制。

注意:这是对 How can I branch on the value inside a Reflex Dynamic? 的更详细的后续问题。 .这个问题的不同/更清楚的是，不丢失检查值内所有内容的有效更新的额外愿望。感谢所有在这个问题上提供帮助的人!

Answer 1

答案取决于您的目标和要求。如果你想要最好的 dom 共享，源自两个独立的函数 renderState1和 renderState2 , 我认为需要 virtual-dom .

但实际上听起来你想对什么时候添加到 DOM 有一些精确的控制。

如果您修改了 renderState1 的版本，您可以做一些简单的事情。和 renderState2手头各拿一个Maybe State1或 Maybe State2论点是构建一对这样的动态可能并使用 css 属性来隐藏一个或另一个:

let mState1 = (\c -> case c of
                  s@(State1 _ _) -> Just s
                  _              -> Nothing
              ) <$> dynMyState
    mState2 = (\c -> case c of
                  s@(State2 _ _ _) -> Just s
                  _                -> Nothing
    nothingHider a m =
       let atr = bool mempty ("style" =: "displayNone") . isJust <$> a
       in  elDynAttr "div" atr (m a)

nothingHider mState1 renderMaybeState1
nothingHider mState2 renderMaybeState2

如果您 derive Prisms那么很多尴尬就可以摆脱了。