HTML布局：在Elm web apge中混合[Element]和[Signal Element]

Question

我正在阅读有关flow down的内容，我们假设让我们在网站上垂直堆叠元素。当您网站的某些部分是信号时，您应该怎么做？我会想象一个像这样的网站：

• 简介
• 动态组件
• 更多静态文字

flow down: [Element] -> Element的类型，所以我不能像我希望的那样混合[signal Element]。在之前的解决方案中，我看到了涉及lift的解决方案，所以这就是我想出的：

import Random
main = column <~ (constant "5") ~ (Random.range 0 100 (every second))
column x y = flow down [asText x, asText y]

这里我只是将数字5叠加在一个随机变化的数字之上。也许取决于窗口大小，

import Random
import Window

main = column <~ (constant "5") ~ Window.dimensions
column x y = flow down [asText x, asText y]

这被认为是好的做法还是有更好的方法在榆树做布局？

Answer 1

提取非信号功能并解除它通常是一种很好的做法。在这种情况下，如果您愿意，也可以使用Signal.Extra.combine : [Signal a] -> Signal [a]：

main = flow down <~ combine [constant (asText "5"), asText <~ Window.dimensions]

正如您所看到的，除了解决方案之外，还有很多提升，只是为了让它成为一个单行。所以我不认为这是理想的。但combine在其他（更具动态性）的情况下可以派上用场。

完全披露：我是我链接到的库函数的作者。

Answer 2

最新答案。 您可以使用combine，它现在位于Signal-extra库中，或者，对于这个简单的情况

 column x y = 
    Signal.map (flow down) <|
      Signal.map2 (\a b -> [a, b]) (show x) (show y)