Question

如何将this甜蜜对话框集成到我的Elm代码中。我在index.html中加入了JS和CSS。如何在更新功能中调用此JavaScript函数？

update : Action -> Model -> (Model, Effects Action)
update action model =
  case action of
    Submit ->
      let valid = length model.name > 0
      in
        if valid 
          then (model, swal({"title": "Invalid name"}))
          else (model, swal({"title": "Valid name"}))

Answer 1

在没有查看所有视图代码的情况下安装完整示例很棘手，但我希望这个更简单的版本有所帮助！在this repo ...

的某些范围内受到贿赂

的index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="Main.js" type="text/javascript"></script>
        <script type="text/javascript"
            src="bower_components/sweetalert/dist/sweetalert.min.js"
        ></script>
        <link rel="stylesheet"
            href="bower_components/sweetalert/dist/sweetalert.css"
        />
  </head>
  <body>
        <div id="main"></div>   
        <script type="text/javascript">

            var so = Elm.embed(Elm.Main, document.getElementById('main'));
            so.ports.callSwal.subscribe(doAlert); 
            function doAlert(space) {
                    if (space) swal("Hey, a spacebar!");
            }

        </script>
  </body>
</html>

modal.elm

import Graphics.Element
import Keyboard


port callSwal : Signal Bool
port callSwal =
    Keyboard.space


main = Graphics.Element.show "How about pressing a spacebar?"

我做的事情是为了让它发挥作用

$ bower install sweetalert
$ elm-make modal.elm --output=Main.js

注意

嵌入Elm应用程序，为js提供一个访问对象（此处为“so”）
在js中，订阅一个命名端口并给它一个回调函数。
在elm中创建端口。这个需要一个简单的Bool，但我想你的至少需要一个String。

更好的答案

诀窍是注意到startApp有一个邮箱，你可以通过app.model访问它。

警告消息成为模型的一部分。如果它是一个空字符串，我们将其解释为“不触发任何警报”。

NB。我不知道为什么update需要返回一个带有Events Action的元组。那里没有用过..

这是一个放在一起的例子：

var so = Elm.embed(Elm.Main, document.getElementById('main'));
so.ports.alert.subscribe(function(text) {
    if (text.length > 0) swal(text);
});

import StartApp
import Task exposing (Task)
import Effects exposing (Effects, Never)
import Html exposing (Html, div, input, button, text)
import Html.Events exposing (on, onClick, targetValue)
import String exposing (length)


app :
  { html : Signal Html
  , model : Signal Model
  , tasks : Signal (Task Never ())
  }
app =
  StartApp.start
    { init = init
    , update = update
    , view = view
    , inputs = []
    }


port alert : Signal String
port alert =
    Signal.map (\n -> n.alert) app.model


main : Signal Html
main =
  app.html


-- MODEL

type alias Model =
  { name : String
  , alert : String
  }


init : (Model, Effects Action)
init =
  ( { name = ""
    , alert = ""
    }
  , Effects.none
  )


-- UPDATE

type Action
    = Submit
    | TextEntry String


update : Action -> Model -> (Model, Effects Action)
update action model =
  case action of

    Submit ->
      if length model.name > 0 then
        ({ model | alert = "Valid name" }, Effects.none)
      else
        ({ model | alert = "Invalid name" }, Effects.none)

    TextEntry txt ->
      ({ model | name = txt, alert = "" }, Effects.none)


-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  let f = (\str -> Signal.message address (TextEntry str)) in
  div
    []
    [ input
      [ on "input" targetValue f ]
      []
    , button
      [ onClick address Submit ]
      [ text "Submit" ]
    ]

榆树模态对话框

1 个答案:

的index.html

modal.elm

我做的事情是为了让它发挥作用

注意

更好的答案