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 
     }