ページがレンダリングされた後にElmのHTML要素を変更するには？

Question

私はElmにシングルページアプリケーションを書いています。ページがレンダリングされた後、何らかのイベントによっていくつかの要素のプロパティを変更する必要があります。

たとえば、divにクラスが割り当てられていて、ページ上のボタンが押されたときにtoggleのclassListとしたいとします。エルムのネイティブ構造だけではどうすればいいですか？

「古い良い」JavaScriptとElmポートを使用することで、このような目標を達成できることは分かっていますが、「外部」JavaScriptポートとElmポートを使用しないでElmだけを使用する方法がありますか？

1. すべてのページは、エルムによってレンダリングに構成されているいくつかのコメントの後に更新

   、ない「外部」のJavaScriptコード。

2. すべてのページを再描画せずに、HTML要素だけを更新したいと思います。

Answer 1

view関数を返す divは、モデルに応じて適切なクラスで構成できます。

例次の例では、モデル が1の場合、divはクラス「黒」を取得します。 clickイベントは、モデルを更新します。

-- UPDATE 
type Msg 
    = ToggleColor 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
    ToggleColor -> (if model == 0 then 1 else 0, Cmd.none) 

-- VIEW 
view : Model -> Html Msg 
view model = 
    let 
    classAttributes = classList [("black", model == 1)] 
    in div [ classAttributes, onClick ToggleColor ] [ text "test" ]