2016-11-11 5 views
2

Я использую вяз 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.

+1

Будет сложно, если не невозможно, заставить это работать, я думаю. Виртуальный DOM от Elm предполагает, что реальный DOM всегда синхронизирован. Select2 разрывает это. Возможно, лучше всего управлять данными для списка выбора в Elm: сохранить выбранную страну и список параметров в вашей модели.Отправьте параметры JavaScript с помощью ap-порта, отрисуйте '