Hi Thomas,
I got it to work by wrapping the text inside a textarea and watching that:
viewCell : Int -> Int -> String -> Html Msg
viewCell rowIndex colIndex content =
td
[ attribute "data-x" "1"
, attribute "data-y" "1"
, style [("border","solid black 1px")]
]
[ textarea
[ onInput (Input rowIndex colIndex)
, contenteditable True
]
[ text content ]
]
The styling is horrible, though ;-)
Regards,
Roland
> 20 nov. 2016 kl. 20:16 skrev Thomas Shelton <[email protected]>:
>
> Thanks for the insights ... I'm not sure onInput will work with TD's though.
> I'm not seeing any messages logged in the console. I had to create a
> separate function to parse out the innerHTML and use that as the string. I
> think this is where my confusion sets in. How can you do that and still pass
> the extra information around?
>
> Thanks
> Thomas
>
> On Sun, Nov 20, 2016 at 1:52 PM, Wouter In t Velt <[email protected]
> <mailto:[email protected]>> wrote:
> Your Msg is the type you use to send data back. You actually send it to the
> Elm runtime. The Elm runtime then sends it to your update function, together
> with a model.
>
> The nice thing is, you can pass more than one parameter in your message. If
> you define your message as:
>
> type Msg = Input Int Int String
>
> Your message has 2 integers (1 for column, 1 for row in a table) + a string.
>
> You can then use that in your update function to update the correct column
> and row in your table.
>
> Below is a simplified example, you can copy/paste to elm-lang.org/try
> <http://elm-lang.org/try>
>
> import Html exposing (..)
> import Html.Attributes exposing (..)
> import Html.Events exposing (onInput)
>
> main =
> beginnerProgram { model = myTable, view = view, update = update }
>
> myTable : List (List String)
> myTable =
> [ [ "Name", "Age", "Comment" ]
> , [ "Abe", "45", "" ]
> , [ "Bill", "69", "" ]
> , [ "Claire", "54", "" ]
> ]
>
> view model =
> div
> []
> [ table []
> (List.indexedMap viewRow model)
> ]
>
> viewRow : Int -> List String -> Html Msg
> viewRow rowIndex rowCells =
> tr []
> (List.indexedMap (viewCell rowIndex) rowCells)
>
> viewCell : Int -> Int -> String -> Html Msg
> viewCell rowIndex colIndex content =
> td
> [ attribute "data-x" "1"
> , attribute "data-y" "1"
> , onInput (Input rowIndex colIndex)
> , contenteditable True
> , style [("border","solid black 1px")]
> ]
> [ text content ]
>
> type Msg = Input Int Int String
>
>
> update msg model =
> case (Debug.log "msg:" msg) of
> Input rowIndex colIndex str ->
> model
> |> updateList rowIndex (updateList colIndex (always str))
>
> updateList : Int -> (a -> a) -> List a -> List a
> updateList index func list =
> list
> |> List.indexedMap (\i item -> if i == index then func item else item)
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected]
> <mailto:[email protected]>.
> For more options, visit https://groups.google.com/d/optout
> <https://groups.google.com/d/optout>.
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected]
> <mailto:[email protected]>.
> For more options, visit https://groups.google.com/d/optout
> <https://groups.google.com/d/optout>.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
