How to use the ListBox item or data template

[jfhlc]

I've been populating a ListBox with a flat string list as per the docs. I can't however, seem to find any documentation on how to use a list of simple objects ({ Id: int; Name: string }).

I was looking at the underlying control directly from Avalonia but it's really not clear there either. I've tried few different approaches but I'm too new to know what to do. Short of creating a new member on my State type to keep track of the selection and then doing a tryFind match on the name in the object list, what can I do?

ListBox.create [
    ListBox.classes [ "listbox" ]
    ListBox.dataItems (state.availableIssueTypeObjects |> Option.defaultValue [])
    // ListBox.itemTemplate how to tell the listbox to look at the Name property of the issueType object?
    ListBox.selectedItem (
        state.selectedIssueTypeObject
        |> function
        | Some x -> x.Name
        | None -> ""
    )
    ListBox.onSelectedItemChanged (fun item -> item.ToString() |> SelectedIssueTypeChanged |> dispatch)
]

[JaggerJo]

Hey @jfhlc

take a look at this sample project. It should do exactly what you struggle with.

[JaggerJo]

I would use Components instead of elmish. Elmish does not work well for real apps. Trust me - I have tried.

[jfhlc]

I will definitely take your word for it. I just need to learn how to use them; they confuse me quite a bit, but I'm willing to dig through your examples and learn it as best I can. Quick question though, isn't the UI markup in FuncUI inherently Elmish?

let view () =
        Component(fun ctx ->
            let state = ctx.useState 0

            DockPanel.create [
                DockPanel.children [
                    Button.create [
                        Button.dock Dock.Bottom
                        Button.onClick (fun _ -> state.Set(state.Current - 1))
                        Button.content "-"
                        Button.horizontalAlignment HorizontalAlignment.Stretch
                        Button.horizontalContentAlignment HorizontalAlignment.Center
                    ]
                    Button.create [
                        Button.dock Dock.Bottom
                        Button.onClick (fun _ -> state.Set(state.Current + 1))
                        Button.content "+"
                        Button.horizontalAlignment HorizontalAlignment.Stretch
                        Button.horizontalContentAlignment HorizontalAlignment.Center
                    ]
                    TextBlock.create [
                        TextBlock.dock Dock.Top
                        TextBlock.fontSize 48.0
                        TextBlock.verticalAlignment VerticalAlignment.Center
                        TextBlock.horizontalAlignment HorizontalAlignment.Center
                        TextBlock.text (string state.Current)
                    ]
                ]
            ]
        )

And, don't I lose the MVU approach with Components as well? A quick look through the examples don't seem to have the obvious code of State, view, update, and Msg?

[JaggerJo]

The view DSL is not tied to Elmish at all.

FuncUI Components behave a lot like React Components. You can think of components as compressed MVU. You don't need a separate message type as you can directly "modify" state which will trigger a view update.

[JaggerJo]

Btw. make sure to check our docs, they explain components and how they work.

[jfhlc]

Absolutely. Thank you. I've been on the docs quite a bit, but like I said there is definitely some technical debt here that prevents me from understanding it fully. The only way is for me to understand is to just jump in and build stuff based on the examples. Thanks for all your work on this (and the other contributors). Although, I don't completely understand how to use it yet, it's been a joy to get started on!