问题描述
我正在使用elm 0.17.1并尝试与select2 javascript库（版本4.0.3）互操作，这是我的Main.elm：
I'm using elm 0.17.1 and trying to interop with select2 javascript library(version 4.0.3), here is my 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方：
and the javascript side :
$(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);
});
})
})
现在当我选择一个国家/地区时，我的铬控制台中出现未捕获的类型错误，显示 domNode.replaceData 不是一个函数（它实际上是未定义的）。
Right now when I select a country an Uncaught type error in my chromium's console appears saying that domNode.replaceData is not a function(it is actually undefined).
问题是select2为DOM添加了一个跨度，而Elm不知道它，检查 domNode 显示Elm在更新文本时会尝试更新 span 。
The problem is that select2 adds a span to the DOM and Elm doesn't know about it, inspecting domNode reveals that Elm tries to update the span when it should update the text.
我想我需要效果，但我不知道如何在我的特定用例中使用它们。
I suppose I need effects but I don't know how to use them in my particular usecase.
如何解决我的问题？
我正在使用jquery 3的记录，我将我的elm程序编译成main.js并按以下顺序加载js文件：jquery.min.js，select2 .min.js，main.js然后是上面的js代码。
for the record I'm using jquery 3 , I compile my elm program into main.js and I load the js files in this order : jquery.min.js, select2.min.js,main.js then the above js code .
我无法用elm-reactor调试这个，因为它似乎只适用于榆树代码而不是js代码。
I couldn't debug this with elm-reactor because it seems to only work with elm code not js code.
推荐答案
为了解决这个问题，我做了一个展示了将任何第三方JavaScript技术集成到你的Elm应用程序中的所有核心思想。
To address this question I've made this example to demonstrate all the core ideas of integrating any third-party JavaScript technology in to your Elm app.
以下是规则：
- 让Elm拥有st ate
- 不要改变由Elm的
视图生成的DOM - 你不需要
$（文件）.ready（），如果Elm app控制
初始化逻辑 - 使用ports初始化和控制第三方代码
- Let Elm to own the state
- Do not mutate the DOM, produced by Elm'sview
- You don't need
$(document).ready(), if Elm app controls theinitialization logic - Use ports to initialize and control the third-party code
示例中的兴趣点：
-
- 拥有select2的配置并订阅更改
App.elm — owns the configuration for select2 and subscribes to changes
该视图提供了所有jQuery魔术的容器：
The view provides a container for all the jQuery magic:
view : Model -> Html Msg view model = div [] [ text (toString model) , div [ id "select2-container" ] [] -- The container, where select2 will live ]任何反馈都非常受欢迎，我愿意改善这个答案，如果你可以告诉我，缺少什么。
Any feedback is very welcome, I'm willing to improve this answer if you could tell me, what is missing.
这篇关于如何告诉榆树外部DOM的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！