如何去抖榆树信号?
How to debounce elm signals?
我正在使用 start-app
来塑造我的应用程序。 Html.Events
支持使用自定义 Signal.message
创建自定义事件。但是如何发送该消息是在 Html 库后面抽象出来的。还有一个称为实现去抖动的库(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"]
]
您可以在绑定到@Apanatshka 的 settledAfter
函数之前通过代理邮箱设置 HTML 属性的去抖动。
(请注意,由于您使用的是 StartApp,我们无法直接访问主地址,因此我不得不通过忽略 address
传递到 view
。你可以通过不使用 StartApp 获得更通用的东西,但这应该可以帮助你开始)
由于事件属性不能直接创建任务,所以我们不得不使用中间代理邮箱。我们可以这样设置:
debounceProxy : Signal.Mailbox Action
debounceProxy =
Signal.mailbox NoOp
请注意,上述函数需要一个 NoOp
动作,这在 Elm 架构中很常见,这只是意味着 update
函数不会对模型进行任何更改。
现在我们需要设置另一个监听代理邮箱的Signal,然后通过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。
我正在使用 start-app
来塑造我的应用程序。 Html.Events
支持使用自定义 Signal.message
创建自定义事件。但是如何发送该消息是在 Html 库后面抽象出来的。还有一个称为实现去抖动的库(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"]
]
您可以在绑定到@Apanatshka 的 settledAfter
函数之前通过代理邮箱设置 HTML 属性的去抖动。
(请注意,由于您使用的是 StartApp,我们无法直接访问主地址,因此我不得不通过忽略 address
传递到 view
。你可以通过不使用 StartApp 获得更通用的东西,但这应该可以帮助你开始)
由于事件属性不能直接创建任务,所以我们不得不使用中间代理邮箱。我们可以这样设置:
debounceProxy : Signal.Mailbox Action
debounceProxy =
Signal.mailbox NoOp
请注意,上述函数需要一个 NoOp
动作,这在 Elm 架构中很常见,这只是意味着 update
函数不会对模型进行任何更改。
现在我们需要设置另一个监听代理邮箱的Signal,然后通过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。