多个主信号，信号到文本

Question

我刚进入榆树，我被困在一个问题上，乍一看这个问题看起来很简单，但我很难找到解决这个问题的最佳方法。

练习：

编写一个程序，显示三个文本字段，垂直排列。第一个显示当前鼠标位置和真假，这取决于鼠标左键当前是否按下。第二个文本框显示在第一个文本框下面，并根据空格键是否关闭而显示真假。最后，第三个text字段显示Keyboard.arrows的当前值。播放结果程序，以便您了解所有这些输入信号的行为。

我的代码：

import Keyboard
import Mouse
import Html exposing ( Html )

main = 
  Signal.map mapStringToHtml position,
  Signal.map mapStringToHtml mouseDown,
  Signal.map mapStringToHtml spaceDown,
  Signal.map mapStringToHtml arrows

mapStringToHtml : String -> Html
mapStringToHtml x = Html.text x

position : Signal String
position = Signal.map toString Mouse.position

mouseDown : Signal String
mouseDown = Signal.map toString Mouse.isDown

spaceDown : Signal String
spaceDown = Signal.map toString Keyboard.space

arrows : Signal String
arrows = Signal.map toString Keyboard.arrows

我的主语不编译，但我不知道还需要怎么做。我在正确的道路上吗？能再短一点吗？在这种情况下，我如何使用体系结构模型、视图、更新？

任何帮助都很感激。

Answer 1

微创性

您可以使用完整的榆树架构，但由于这似乎是一个学习练习，让我给您一个最小的改变，使它发挥作用：

main =
  Signal.map4 combineHtml
    (Signal.map mapStringToHtml position)
    (Signal.map mapStringToHtml mouseDown)
    (Signal.map mapStringToHtml spaceDown)
    (Signal.map mapStringToHtml arrows)

combineHtml pos mouse space arr =
  Html.div [] [pos, mouse, space, arr]

mapStringToHtml : String -> Html
mapStringToHtml x = Html.div [] [Html.text x]

因此，每一段文字都属于它自己的部分。combineHtml将所有这些合并到另一个div中。我想这是最简单的办法，让他们都在一个单独的线路上。

为了将div的信号合并成一个，我们使用Signal.map4。它需要一个包含四个参数和四个信号的函数。每当其中一个信号更新时，该函数将使用来自该信号的最新值进行评估。

重写

最小的更改处理所有信息相同，并将它们放在一个单独的行。但问题是，鼠标的位置和按钮应该在同一条线上。下面是对这个程序的重写，它的代码复制也少了一点：

import Keyboard
import Mouse
import Html exposing ( Html )

main = Signal.map4 view
  Mouse.position
  Mouse.isDown
  Keyboard.space
  Keyboard.arrows

view position mouseDown spaceDown arrows =
  let
    div  = Html.div []
    text = toString >> Html.text
    spacer = Html.text " "
  in
    div
      [ div [ text position, spacer, text mouseDown ]
      , div [ text spaceDown ]
      , div [ text arrows ]
      ]

let-in构造定义了一些本地常量。div是Html.div的快捷方式，其中第一个参数总是空列表。text是一个函数，它首先应用toString，然后应用Html.text。因此，这些职能的长期形式是：

    div children = Html.div [] children
    text something = Html.text (toString something)
    -- or as pipeline: text something = something |> toString |> Html.text