Я использую вяз 0.17.1 и пытается Interop с ВЫБ.2 библиотекой JavaScript (версия 4.0.3), вот мой Main.elm:как сказать вяз о внешнем DOM изменения
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);
});
})
})
Прямо сейчас, когда я выбираю страну неперехваченного тип ошибки в консоли моего хрома появляется о том, что domNode.replaceData
не является функцией (это на самом деле не определен).
Проблема заключается в том, что select2 добавляет пролет в DOM, а Elm не знает об этом, проверка domNode
показывает, что Elm пытается обновить span
, когда он должен обновить текст.
Предполагаю, что мне нужны эффекты, но я не знаю, как их использовать в моем конкретном случае.
Как решить мою проблему?
для записи Я использую jquery 3, я скомпилирую программу elm в main.js, и я загружаю файлы js в следующем порядке: jquery.min.js, select2.min.js, main.js, затем выше js-кода.
Я не мог отлаживать это с помощью elm-реактора, потому что он работает только с кодом вязов, а не с кодом js.
Будет сложно, если не невозможно, заставить это работать, я думаю. Виртуальный DOM от Elm предполагает, что реальный DOM всегда синхронизирован. Select2 разрывает это. Возможно, лучше всего управлять данными для списка выбора в Elm: сохранить выбранную страну и список параметров в вашей модели.Отправьте параметры JavaScript с помощью ap-порта, отрисуйте '