5

我创建了一个应用程序，它下载一些数据并使用谷歌图表将其绘制到div一个特定的Id.

这在静态页面上运行良好。但是，当使用菜单在多个视图之间切换时，我在切换回适当的视图时很难重新绘制图表。

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

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

示例代码如下（不可运行，但应该很容易理解）。单击“获取数据”按钮可以正常工作，但是如果您随后切换到另一个页面并返回，我找不到再次绘制图表的方法。

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>
4

2 回答 2

8

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

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

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

于 2018-10-06T15:40:00.297 回答
1

在没有看到您的代码的情况下给出具体建议有点困难，但这里有一个关于如何处理它的一般想法。在你的鞋子里，我可能会使用Fable Powerpack 中的 Promise 实现，并像这样设置它：

  • 图表绘制代码还没有绘制图表，它只是返回一个承诺，当解决时，将绘制图表。
  • 在视图函数中的 div 之后，立即使用这个 hack来触发一些 Javascript 代码，这些代码将解析 Promise，触发 draw() 事件。（或者，正如该问题的另一个答案中所建议的那样，将该代码放在script视图底部的一个元素中，这样它的执行就不会阻止其他任何东西的渲染，然后在脚本内部是您解决该承诺的地方） .

对不起，这太模糊了；如果我看到你的代码，我可能会提出更具体的建议。特别是，我不知道如何最好地处理传递该承诺：将其存储在模型中似乎是个坏主意（将可变的东西存储在不可变的数据模型中......哎呀），但我还没有想出一个更好的主意。但是与承诺相关的东西似乎是处理这种情况的最佳方法。

于 2018-10-05T22:48:31.623 回答