Блог

Экспортировать консоль сложно.журнал с помощью Elm.

Я хочу вывести журнал консоли, нажав кнопку, как показано ниже, и с помощью функции входа в консоль. Как мне это сделать?

 sampleView : Html Message
sampleView =
    Html.div (class "sample-card" :: Styles.sampleCard)
        [ Html.div
            (class "sample-card-list" :: Styles.sampleCardList)
            [
                Html.button
                    (class "sample-card-button" :: Styles.sampleCardListButton)
                    [
                        Html.text "サンプルボタン"
                    ]
            ]
        ]
  

Если я использую Javascript, я хочу сделать, как показано ниже.

 <button class="sample-card-button" onclick="btnClick();">サンプルボタン</button>

/* JavaScript 側 */
function btnClick() {
  console.log("クリックされました");
});
  

Если это просто для отладки, вы можете использовать Debug.log , но вы не можете использовать Debug модуль в производственном коде (запуск компилятора с --optimize не удастся скомпилировать, если у вас есть Debug обычаи). Его использование может выглядеть следующим образом:

 sampleView : Html Message
sampleView =
    Html.div (class "sample-card" :: Styles.sampleCard)
        [ Html.div
            (class "sample-card-list" :: Styles.sampleCardList)
            [
                Html.button
                    ([class "sample-card-button", onClick CardButtonClicked]    Styles.sampleCardListButton)
                    [
                        Html.text "サンプルボタン"
                    ]
            ]
        ]

update : Message -> Model -> ( Model, Cmd Message )
update msg model =
    case msg of
        CardButtonClicked ->
            let
                _ = Debug.log "クリックされました" msg
            in
            ( model, Cmd.none )
  

Если вы хотите выполнить запись в консоль в производственном приложении, вам потребуется использовать порт. Чтобы создать порт, вам нужно обновить модуль, в котором он находится, чтобы он был объявлен a port module (просто добавьте port в начало объявления модуля в первой строке файла).

 port module Main exposing (..)

port consoleLog : String -> Cmd msg

update : Message -> Model -> ( Model, Cmd Message )
update msg model =
    case msg of
        CardButtonClicked ->
            ( model, consoleLog "クリックされました" )
  

Затем вам нужно подключить некоторый JavaScript для обработки этого сообщения о переносе:

 var app = Elm.Main.init({ node: document.querySelector('main') })
app.ports.consoleLog.subscribe(function (msg) {
    console.log(msg);
});
  

Вот пример приложения, использующего порт для вызова console.log .