Question

我使用elm 0.17.1并尝试与select2 javascript库（版本4.0.3）互操作，这是我的Main.elm：

port module Main exposing (..)

import Html exposing (Html,select,option,div,text,br)
import Html.App as App
import Html.Attributes exposing (id,value,width)
-- MODEL

type alias Model =
  {
     country : String
  }


-- UPDATE

type Msg =
      Select String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Select str -> (Model str,Cmd.none)


-- VIEW

view : Model -> Html Msg
view model =
  div[]
  [
    select [id "myselect"]
    [
     option [value "US"] [text "United States"],
     option [value "UK"] [text "United Kingdom"]
    ],
    text model.country
  ]

-- SUBSCRIPTIONS

port selection : (String -> msg) -> Sub msg

subscriptions : Model -> Sub Msg
subscriptions _=
  selection Select


port issueselect2 : String -> Cmd msg

-- INIT

init : (Model, Cmd Msg)
init =
  ({country=""},issueselect2 "myselect")

main : Program Never
main = App.program {init=init,view=view,update=update,subscriptions=subscriptions}

和javascript方面：

$(document).ready(function()
     {
        var app=Elm.Main.fullscreen();
        app.ports.issueselect2.subscribe(function(id)
        {
           $('#'+id).select2().on('change',function(e)
           {
              app.ports.selection.send(e.target.value);
           });
        })
     })

现在，当我选择一个国家/地区时，我的Chrome控制台中出现了一个未捕获的类型错误，显示domNode.replaceData不是一个函数（它实际上是未定义的）。

问题是select2为DOM添加了一个范围，而Elm并不知道它，检查domNode显示Elm在更新文本时会尝试更新span。

我想我需要效果，但我不知道如何在我的特定用例中使用它们。

如何解决我的问题？

对于记录我使用jquery 3，我将我的elm程序编译成main.js并按以下顺序加载js文件：jquery.min.js，select2.min.js，main.js然后上面的js代码。

我无法使用elm-reactor对其进行调试，因为它似乎只适用于榆树代码而不是js代码。

Answer 1

为了解决这个问题，我已经this example展示了将任何第三方JavaScript技术集成到您的Elm应用程序中的所有核心思想。

以下是规则：

让榆树拥有国家
不要改变由Elm制作的DOM 图
如果Elm app控制，则您不需要$(document).ready() 初始化逻辑
使用端口初始化和控制第三方代码

示例中的兴趣点：

index.js - JavaScript中的端口订阅设置和select2引导代码
App.elm - 拥有select2的配置并订阅更改

该视图为所有jQuery魔术提供了一个容器：

view : Model -> Html Msg
view model =
    div []
        [ text (toString model)
        , div [ id "select2-container" ] [] -- The container, where select2 will live
        ]

我们非常欢迎任何反馈意见，如果你能告诉我，有什么不足，我愿意改进这个答案。

如何告诉榆树外部DOM的变化

1 个答案: