mdl-lite對話框不顯示正確的信息

Question

我正在嘗試製作一個按鈕列表，每個按鈕都打開一個顯示不同數字的對話框。例如，第一個按鈕表示'10'，然後當它被點擊時，會打開一個對話框，其中也會顯示'10'。第二個是'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-精簡版只支持每個應用程序一個對話框，所以這個問題必須一直在呼籲element多次。解決方案是在視圖函數中調用element一次，然後每按一次按鈕以更新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 
     }