mdl-liteダイアログに正しい情報が表示されない

Question

ボタンのリストを作成しようとしています。それぞれのボタンは異なる番号を表示するダイアログを開きます。たとえば、最初のボタンは「10」と表示され、クリックすると「10」と表示されるダイアログが開きます。 2つ目は「20」と言われ、クリックされると「20」などとも呼ばれるダイアログが開きます。しかし、すべてのダイアログは開いたときに「10」と表示されます。ここで

コードです：

module Main exposing (..) 

import Html exposing (Html, div, text, p) 
import Html.App as App exposing (program) 
import Material 
import Material.Button as Button 
import Material.Scheme as Scheme 
import Material.Dialog as Dialog 


-- MODEL 


type alias Model = 
    { buttons : List Int, mdl : Material.Model } 


init : (Model, Cmd Msg) 
init = 
    ({ buttons = [ 10, 20, 30, 40, 50, 60, 70 ], mdl = Material.model }, Cmd.none) 



-- MESSAGES 


type Msg 
    = Log Int 
    | Mdl (Material.Msg Msg) 



--VIEW 


element : Int -> Model -> Html Msg 
element int model = 
    Dialog.view 
     [] 
     [ Dialog.title [] [ text "Greetings" ] 
     , Dialog.content [] 
      [ p [] [ text "What is this insanity?" ] 
      , p [] [ text (toString int) ] 
      ] 
     , Dialog.actions [] 
      [ Button.render Mdl 
       [ 0 ] 
       model.mdl 
       [ Dialog.closeOn "click" ] 
       [ text "Close" ] 
      ] 
     ] 


view : Model -> Html Msg 
view model = 
    div [] 
     (List.map (\b -> button b model) model.buttons) 
     |> Scheme.top 


button : Int -> Model -> Html Msg 
button int model = 
    div [] 
     [ Button.render 
      Mdl 
      [ 1 ] 
      model.mdl 
      [ Button.raised 
      , Button.ripple 
      , Button.onClick (Log int) 
      , Dialog.openOn "click" 
      ] 
      [ text (toString int) ] 
     , element int model 
     ] 



-- UPDATE 


update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     Log int -> 
      let 
       check = 
        Debug.log "Int" int 
      in 
       model ! [] 

     Mdl msg' -> 
      Material.update msg' model 



-- MAIN 


main : Program Never 
main = 
    program 
     { init = init 
     , view = view 
     , update = update 
     , subscriptions = always Sub.none 
     } 

Answer 1

私は、MDL-liteの読み取り専用のアプリケーションごとに1つのダイアログをサポートしていますので、問題がelement複数回呼び出すされている必要があります。解決方法は、ビュー機能でelementを1回呼び出して、各ボタンをクリックしてmodelのdialogIntの値を更新し、この値をダイアログに表示することです。ここで

はコードです：

module Main exposing (..) 

import Html exposing (Html, div, text, p) 
import Html.App as App exposing (program) 
import Material 
import Material.Button as Button 
import Material.Scheme as Scheme 
import Material.Dialog as Dialog 


-- MODEL 


type alias Model = 
    { ints : List Int, dialogInt : Int, mdl : Material.Model } 


init : (Model, Cmd Msg) 
init = 
    ({ ints = [ 10, 20, 30, 40, 50, 60, 70 ], dialogInt = 0, mdl = Material.model }, Cmd.none) 



-- MESSAGES 


type Msg 
    = Log Int 
    | UpdateDialogInt Int 
    | Mdl (Material.Msg Msg) 



--VIEW 


element : Model -> Html Msg 
element model = 
    -- let 
    --  check = 
    --   Debug.log "int" int 
    -- in 
    Dialog.view 
     [] 
     [ Dialog.title [] [ text "Greetings" ] 
     , Dialog.content [] 
      [ p [] [ text "What is this insanity?" ] 
      , p [] [ text (toString model.dialogInt) ] 
      ] 
     , Dialog.actions [] 
      [ Button.render Mdl 
       [ 1 ] 
       model.mdl 
       [ Dialog.closeOn "click" ] 
       [ text "Close" ] 
      ] 
     ] 


view : Model -> Html Msg 
view model = 
    div [] 
     ((element 
      model 
     ) 
      :: (List.map (\b -> button b model) model.ints) 
     ) 
     |> Scheme.top 


button : Int -> Model -> Html Msg 
button int model = 
    div [] 
     [ Button.render 
      Mdl 
      [ int ] 
      model.mdl 
      [ Button.raised 
      , Button.ripple 
      , Button.onClick (UpdateDialogInt int) 
      , Dialog.openOn "click" 
      ] 
      [ text (toString int) ] 
     ] 



-- UPDATE 


update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     Log int -> 
      let 
       check = 
        Debug.log "int" int 
      in 
       model ! [] 

     UpdateDialogInt int -> 
      { model | dialogInt = int } ! [] 

     Mdl msg' -> 
      let 
       check = 
        Debug.log "msg" msg' 
      in 
       Material.update msg' model 



-- MAIN 


main : Program Never 
main = 
    program 
     { init = init 
     , view = view 
     , update = update 
     , subscriptions = always Sub.none 
     }