Как передать аргументы со страницы html в скомпилированное приложение js, используя Elmish с Fable - PullRequest
Новая
       34

Как передать аргументы со страницы html в скомпилированное приложение js, используя Elmish с Fable

0 голосов
/ 16 ноября 2018

В elm вы можете передать флаг приложению elm следующим образом:

HTML / JS 

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

Затем приложение elm получает параметры для init: 

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

Я просмотрел документацию басни, и мне не ясно, как я могу достичь того же.

Я вижу, что есть опция Program.runWith для отправки параметров в функцию init, но я не могу найти документацию и не могу понять из скомпилированного javascript, как мне следует вызывать основную функцию из файла html.

С помощью fable я хочу иметь возможность сделать что-то подобное в 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 голосов
/ 31 января 2019

при создании вашего 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"

Обратите внимание, что initial в init является строкой, поскольку она получает аргумент 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

Итак, вы настраиваете регистрацию функции startApplication в глобальной области видимости window.

Более чистое решение - использовать 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
    }

И теперь вы можете вызывать его из JavaScript, используя Program.api.Run("initial value")

...