首页 文章

在fable-elmish中，如何在呈现视图后触发命令？

提问于
浏览 次
3

我已经创建了一个应用程序，可以下载一些数据并使用Google Charts将其绘制到具有特定 Id 的 div .

这在静态页面上工作正常 . 但是，当使用菜单在多个视图之间切换时，我很难在切换回适当的视图时重绘图表 .

如果我在更新模型时使用命令重绘图表，则请求失败，因为尚未呈现特定的 div .

Model-View-Update 的 View 阶段完成后有没有办法触发命令？还是重新绘制图表的更好方法？

示例代码如下（不可运行，但应该直接遵循） . 单击“获取数据”按钮工作正常，但如果您切换到另一页并返回，我找不到再次绘制图表的方法 .

module Client

open Elmish
open Elmish.React

open Fable.Helpers.React
open Fable.Helpers.React.Props

open Fulma

type View = ShowChart | NoChart
type Model = { View: View; Values: float[] option }

type Msg =
    | RequestValues
    | ReceiveValues of float[]
    | PageWithChart
    | PageWithoutChart
    | DrawChart

let init () : Model * Cmd<Msg> =
    { View = ShowChart; Values = None }, []

let update (msg : Msg) (currentModel : Model) : Model * Cmd<Msg> =
    match msg with
    | RequestValues -> currentModel, Cmd.ofMsg (ReceiveValues [| 1.0; 3.0; 2.0 |])  // normally this would be a long-running process
    | ReceiveValues values -> { currentModel with Values = Some values }, Cmd.ofMsg DrawChart
    | DrawChart ->
        match currentModel.Values with
        | Some values ->
            let series = TheGamma.Series.series<_, _>.values values
            let chart = TheGamma.GoogleCharts.chart.line series
            TheGamma.GoogleCharts.chart.show chart "Chart1"
        | None -> ()
        currentModel, []
    | PageWithChart ->
        match currentModel.Values with
        | Some _ -> { currentModel with View = ShowChart }, Cmd.ofMsg DrawChart // FAILS as the div with Id="Chart1" does not exist yet
        | None -> { currentModel with View = ShowChart }, []
    | PageWithoutChart -> { currentModel with View = NoChart }, []

let button txt onClick =
    Button.button
        [ Button.OnClick onClick ]
        [ str txt ]

let view (model : Model) (dispatch : Msg -> unit) =
    match model.View with
    | NoChart ->
        div []
          [ div [] [ str "Page without chart" ]
            button "Show page with chart" (fun _ -> dispatch PageWithChart) ]
    | ShowChart ->
        div []
          [ div [] [ str "Page with chart" ]
            button "Get data" (fun _ -> dispatch RequestValues)
            button "Show page without chart" (fun _ -> dispatch PageWithoutChart )
            div [ Id "Chart1" ] [] ]

#if DEBUG
open Elmish.Debug
open Elmish.HMR
#endif

Program.mkProgram init update view
#if DEBUG
|> Program.withConsoleTrace
|> Program.withHMR
#endif
|> Program.withReact "elmish-app"
|> Program.run

HTML只是：

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <title>SAFE Template</title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <link rel="shortcut icon" type="image/png" href="/Images/safe_favicon.png"/>
</head>
<body>
    <div id="elmish-app"></div>
    <script src="./js/bundle.js"></script>
</body>
</html>
f# fable-f# elmish

2 回答

  • 1

    您可以使用 Ref 属性检测何时安装了无状态react元素 .

    例如，这是我在我的 生产环境 应用程序中使用的：

    div [ Id "Chart1"
      Ref (fun element ->
          // Ref is trigger with null once for stateless element so we need to wait for the second trigger
          if not (isNull element) then
              // The div has been mounted check if this is the first time
              if model.IsJustLoaded then
                  // This is the first time, we can trigger a draw
                  dispatch DrawChart 
          )
 ]
    [ ]

    另一种方法是将 div [ Id "Chart1" ] [ ] 转换为有状态的反应组件，并在调用 componentDidMount 时触发绘制 .

    回复于
  • 4

    它是如何处理它的一般概念 . 在你的鞋子里，我可能会使用Promise implementation from the Fable Powerpack，并将它设置为：

    • 图表绘制代码尚未绘制图表，它只返回一个承诺，当解析时，将绘制图表 .

    • 在视图函数中的div之后，立即使用this hack触发一些解析promise的Javascript代码，触发draw（）事件 . （或者，如建议的in another answer to that question，将该代码放在视图底部的 script 元素中，以便其执行不会解决该承诺） .

    对不起，这太模糊了;如果我看到你的代码，我可能会提出更具体的建议 . 特别是，我还没有想出更好的主意 . 但承诺相关的东西似乎是处理这种情况的最佳方式 .

    回复于

相关问题