微创

Question

我刚进入榆树，我遇到了一个问题，一见钟情看起来很简单，但我正在努力寻找解决这个问题的最佳做法。

练习：

编写一个程序，显示三个垂直排列的文本字段。第一个显示当前鼠标位置和True或False，具体取决于鼠标左键当前是否已关闭。第二个文本框显示在第一个文本框下方，并显示True或False，具体取决于空格键是否已关闭。最后，第三个文本字段显示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]

所以每段文字都在自己的div中。 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

主要的多个信号，信号到文本

1 个答案:

微创

重写