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-lite只支持每个应用程序一个对话框，因此问题必须多次调用element。解决方案是在视图函数中调用element一次，并单击每个按钮以更新dialogInt中的model值，然后在对话框中显示此值。

以下是代码：

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
        }

mdl-lite对话框未显示正确的信息

1 个答案: