Elm 模态对话框-6ren

Elm 模态对话框

转载作者：行者123 更新时间：2023-12-03 18:36:50

25

4

我如何集成 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"}))

最佳答案

在没有要检查的所有 View 代码的情况下组装一个完整的示例是很棘手的，但我希望这个更简单的版本能有所帮助!从 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>

模态.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中，订阅一个命名端口，并给它一个回调函数。
在榆树中创建端口。这个需要一个简单的 Bool，但我猜你的至少需要一个 String。

更好的答案

原来是注意到 startApp 内置了一个邮箱，您可以通过 app.model 访问它。

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

注意。 我不知道为什么 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" ]
    ]

关于Elm 模态对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34965852/

25

4

0

文章推荐： c# - SQLite3 —在C#中存储可变大小的数组列表

文章推荐： kotlin - 如何合并 kotlin 协程中的生产者？

文章推荐： Docker:拉取镜像时出错，在 $PATH 中找不到可执行文件

elm - 如何在 elm (elm-ui) 中悬停时使文本带有删除线？
基本上我想在悬停时使文本带有删除线。这并不容易使用 el [ mouseOver [Font.strike] ] (text "some text") 就像这样 el [ mouseOver [Bac
elm - 如何在 elm (elm-ui) 中悬停时使文本带有删除线？
基本上我想在悬停时使文本带有删除线。这并不容易使用 el [ mouseOver [Font.strike] ] (text "some text") 就像这样 el [ mouseOver [Bac
elm - Elm 中至少有两个元素的列表上的模式匹配
以下模式匹配至少有两个元素的列表有什么问题pos1和 pos2 ? type Pos = (Float, Float) type Tail = [Pos] tail_cut : Float -> Ta
elm - if 语句导致类型错误 elm
我想更新 Elm 类型的记录 type CubeData = {currDirection : Vec3, translation : Vec3, transform : Mat4} 我可以使用以下代
elm - Elm 是否允许循环引用？
假设有两种数据类型: type alias Player = { name : String , team : Team } type alias Team = { name : St
elm - Elm 函数可以有文档字符串吗？
Python 有它们，我发现它们非常有用: def awesome_fn(x, y): """" Calculates some awesome function of x and y
elm - Elm 中的可排序表
我正在尝试在 Elm 中设计一个功能，该功能解析来自 Json 的数据，然后将其呈现在一个可排序的表中。当然，我使用解码器将 Json 数据存储在记录列表中；然后在 View 中，我将记录列表转换为
elm - Elm 中组件之间的通信
假设我正在尝试遵循 Elm 架构并将我的工作流程拆分为 User s 和 Invoice s 使用 StartApp . 用户有发票，但他们必须登录才能访问它们。该模型可能看起来像这样: type
elm - Elm 中智能和dumb组件的想法
我喜欢 React/Redux 的智能和哑组件概念，其中哑组件不处理自己的状态(Dump 组件对外界一无所知，它所做的只是根据其输入触发事件并显示值) .这是微不足道的，因为所有状态都在一个地方处理(
Elm:如何在 elm-repl 中找出 Elm 表达式或子表达式的类型？
如何在 elm-repl 中找出 Elm 表达式或子表达式的类型？ Haskell 的 :type或 :t相当于 Elm REPL 吗？最佳答案 Elm REPL 会自动打印您输入的任何类型。例如:
elm - Elm 中的多个输入？
在 Elm 中是否可以通过一个事件处理程序触发多个输入句柄？例如，假设我有以下内容: button [ type' "button", on "click" getAnything go.ha
elm - Elm 中的通用模式匹配
我正在尝试构建一个通用映射函数，该函数将从联合类型中提取可能的内部类型，对内部值应用转换并将其映射回外部类型。问题是，我需要一种方法来区分外部类型的特定值是否具有内部类型。如果下面的代码实际编译了
elm - Elm 中的保留关键字是什么？
每隔一段时间，您就会遇到如下编译器错误: It looks like the keyword `port` is being used as a variable. 这很烦人。这些关键词有完整的官方列
elm - elm 中的本地存储或其他数据持久化
我刚刚开始考虑使用 Elm 构建一个简单的 Web 应用程序。我的想法是需要在浏览器中保留一些用户数据。有没有办法直接用 Elm 处理数据持久化？例如在浏览器 session 甚至本地存储中？或者我
elm - Elm 的余数运算符是什么
我有这个功能 result = add 1 2 |> \a -> a % 2 == 0) 我收到了这个错误 Elm does not use (%) as the remainder operat
elm - Elm 中的列表拆分
编写一个函数将一个列表分成两个列表。第一部分的长度由调用者指定。我是 Elm 的新手，所以我不确定我的推理是否正确。我认为我需要转换数组中的输入列表，以便我能够按提供的输入数字对其进行切片。我也在语
elm - Elm 0.19 Elm.MODULENAME.embed不是函数
我正在尝试创建一个简单的Elm项目，仅插入“hello world!”串成div。这是我的代码: index.html: ELM Course
elm - Elm:如何在HTML列表中显示字符串列表？
我正在编写elm程序，该程序应将其输出格式化为HTML列表。我要的功能 inputs = ["first", "second", "third"] 并输出本质上是某种Elm Element，
elm - Elm 中类型和类型别名之间的区别？
在 Elm 中，我无法弄清楚什么时候 type 是合适的关键字，什么时候 type 别名才是合适的。文档似乎没有对此进行解释，我也无法在发行说明中找到这一解释。这是否记录在某处？最佳答案我的想法
elm - Elm 中的类型不匹配
我刚刚开始学习 Elm，并且在理解为什么将自定义类型传递到期望的方法时遇到类型不匹配的问题......好吧，我称之为部分类型注释. 这是我正在使用的代码: import Graphics.Elemen

首页

博学

6Ren·AI