首页 文章

如何使用带有寓言的Elmish将参数从html页面传递到已编译的js应用程序

提问于
浏览
1

在elm中,您可以将标志传递给elm应用程序,如下所示:

Html / JS

<div id="elm"></div>
  <script>
var app = Elm.Main.init({
  node: document.getElementById('elm'),
  flags: Date.now()
});
  </script>

然后elm app在init上获取参数:

init : Int -> ( Model, Cmd Msg )
init currentTime =
  ...

我一直在阅读寓言文件,对我而言,我不知道如何实现同样的目标 .

我看到有一个选项Program.runWith在init函数上发送参数,但我找不到文档,我无法从编译的javascript中看到我应该如何从html文件中调用main函数 .

有了寓言,我希望能够在html文件中做这样的事情,但不确定“Program.Run ..”会是什么:

<body>
    <div id="elmish-app" class="elmish-app"></div>
    <script src="bundle.js"></script>
    <script>
        Program.Run({time: Date.now()});
    </script>
</body>

谢谢

1 回答

  • 0

    在创建你的Elmish Program 时,你可以使用 |> Program.runWith 来传递一个初始参数 .

    type Model =
        { Value : string }
    
    let init (initial : string) = { Value = initial }, Cmd.none
    
    Program.mkProgram init update view
    |> Program.withReact "elmish-app"
    |> Program.runWith "My initial value"
    

    请注意 init 中的 initial 是一个字符串,因为它接收 Program.runWith 的参数 .

    为了公开API,在浏览器中 hacky 方式是这样做的:

    open Fable.Core.JsInterop
    
    let private startApplication arg =
        Program.mkProgram init update view
        |> Program.withReact "elmish-app"
        |> Program.runWith arg
    
    Fable.Import.Browser.window?startApplication <- startApplication
    

    因此,您要在全局范围 window 中设置 startApplication 函数 .

    更简洁的解决方案是使用configure webpack 以使其生成库并在 window 范围内为您注册它 .

    在您的webpack.config.js中,您的输出节点应如下所示:

    output: {
            path: resolve('./output'),
            filename: '[name].js',
            libraryTarget: 'var',
            library: 'Program'
        },
    

    然后在您的代码中使用一个接口来公开一个JavaScript友好的API:

    type MyApp =
        abstract Run : string -> unit
    
    let api =
        { new MyApp with
            member __.Run arg = startApplication arg
        }
    

    现在你可以使用 Program.api.Run("initial value") 从JavaScript调用它

相关问题