Question

我使用start-app来塑造我的应用程序。 Html.Events支持使用自定义Signal.message创建自定义事件。但是如何发送该消息是在Html库后面抽象的。另外还有一个名为debouncing（http://package.elm-lang.org/packages/Apanatshka/elm-signal-extra/5.7.0/Signal-Time#settledAfter）的库。

SearchBar.elm：

module PhotosApp.SearchBar (view) where

import Html exposing (input, div, button, text, Html)
import Html.Events exposing (on, onClick, targetValue)
import Html.Attributes exposing (value, type')

import Effects exposing (Effects, Never)

import PhotosApp.Actions as Actions

onTextChange : Signal.Address a -> (String -> a) -> Html.Attribute
onTextChange address contentToValue =
    on "input" targetValue (\str -> Signal.message address (contentToValue str))

view : Signal.Address Actions.Action -> String -> Html
view address model =
    div []
        [ input  [ type' "text", value model, onTextChange address Actions.Search] []
        , button [ onClick address Actions.Clear ] [text "Clear"]
        ]

Answer 1

您可以在绑定@ Apanatshka的settledAfter函数之前通过代理邮箱设置HTML属性的去抖动。

（请注意，由于您使用的是StartApp，我们无法直接访问主地址，因此我不得不忽略传递给address的一些功能。 view。您可以通过不使用StartApp获得更广泛的内容，但这应该可以帮助您入门）

由于事件属性无法直接创建任务，因此我们必须使用中间代理邮箱。我们可以这样设置：

debounceProxy : Signal.Mailbox Action
debounceProxy =
  Signal.mailbox NoOp

请注意，上述函数需要NoOp Action，这在Elm架构中很常见，这意味着update函数不会对模型进行任何更改。

现在我们需要设置另一个侦听代理邮箱的信号，然后通过settledAfter函数传递信号。我们可以像这样定义这个信号：

debounce : Signal Action
debounce =
  settledAfter (500 * Time.millisecond) debounceProxy.signal

我们现在可以将onTextChange功能更改为指向代理邮箱。请注意，我已经取出了第一个Address参数，因为它被忽略了（参见我之前关于符合StartApp的评论）：

onTextChange : (String -> Action) -> Html.Attribute
onTextChange contentToValue =
    on "input" targetValue (\str -> Signal.message debounceProxy.address (contentToValue str))

最后，您必须将debounce信号绑定到StartApp的inputs参数，这意味着您对start的调用将如下所示：

app = StartApp.start
  { init = init
  , update = update
  , view = view
  , inputs = [ debounce ]
  }

我已将完整的工作示例粘贴到gist here。

如何去除榆树信号？

1 个答案: