v1.1 beta New Features: BindList and BindMap

[JordanMarr]

I just released a new beta v1.1.0-beta.1 to try out a new BindList feature.
My goal, if possible, is to provide the same functionality as SourceList, but to allow using a regular List in the Model instead of having to use a SourceList.

Here is the Counter updated so that Actions is a simple Action list instead of a SourceList:

module Counter = 
    type Model =  { Count: int; Actions: Action list }
    and Action = { Description: string; Timestamp: DateTime }

    type Msg = 
        | Increment
        | Decrement
        | Reset

    let init() = 
        { 
            Count = 0
            Actions = [ { Description = "Initialized Counter"; Timestamp = DateTime.Now } ]
        }

    let update (msg: Msg) (model: Model) = 
        match msg with
        | Increment ->
            { 
                Count = model.Count + 1 
                Actions = model.Actions @ [ { Description = "Incremented"; Timestamp = DateTime.Now } ]
            }
        | Decrement ->
            { 
                Count = model.Count - 1 
                Actions = model.Actions @ [ { Description = "Decremented"; Timestamp = DateTime.Now } ]
            }
        | Reset ->
            {
                Count = 0 
                Actions = [ { Description = "Reset"; Timestamp = DateTime.Now } ]
            }

open Counter

type CounterViewModel() =
    inherit ReactiveElmishViewModel()

    let local = 
        Program.mkAvaloniaSimple init update
        |> Program.mkStore

    member this.Count = this.Bind(local, _.Count)
    member this.Actions = this.BindList(local, _.Actions)
    member this.Increment() = local.Dispatch Increment
    member this.Decrement() = local.Dispatch Decrement
    member this.Reset() = local.Dispatch Reset
    member this.IsResetEnabled = this.Bind(local, fun m -> m.Actions.Length > 1)

    static member DesignVM = new CounterViewModel()

[JordanMarr]

I'm also experimenting with a BindMap which should, ideally, support the following features:

• Allows you to use a Map<'Key, 'Value> in your 'Model rather than having to use a SourceCache
• Will require a getKey function, similar to creating a SourceCache.
• Allows you to optionally pass a "create" map/transform function to convert to a new entry to a VM
• Allows you to optionally pass an "update" function to update a transformed VM without replacing it (as replacing it will interrupt text edits to the VM since it also recreates the text box control)
• Allows you to optionally pass a sort

[JordanMarr]

@TeaDrivenDev: I think a BindMap method would be useful for your project, as I recall you were mapping to VM and had issues the VM being replaced when editing text. I believe you had to use a SourceCache manually?

[JordanMarr]

v1.1.0-beta.2 is released with a new experimental BindMap method that lets you use simple Map types in your model instead of SourceCache.

Here is the updated Todo sample:

namespace AvaloniaExample.ViewModels

open ReactiveElmish
open ReactiveElmish.Avalonia
open App
open System
open Avalonia.Controls

module TodoApp = 
    open Elmish

    type Model = { Todos: Map<Guid, Todo> }
    and Todo = { Id: Guid; Description: string; Completed: bool }

    type Msg = 
        | AddTodo
        | RemoveTodo of id: Guid
        | UpdateTodo of Todo
        | Clear

    let init() = 
        if Design.IsDesignMode then 
            { Todos = 
                Map [
                    { Id = Guid.NewGuid(); Description = "Todo 1"; Completed = false } |> fun todo -> todo.Id, todo
                    { Id = Guid.NewGuid(); Description = "Todo 2"; Completed = false } |> fun todo -> todo.Id, todo
                    { Id = Guid.NewGuid(); Description = "Todo 3"; Completed = true } |> fun todo -> todo.Id, todo
                    { Id = Guid.NewGuid(); Description = "Todo 4"; Completed = false } |> fun todo -> todo.Id, todo
                ]                
            }, Cmd.none
        else
            { Todos = Map.empty
            }, Cmd.ofMsg AddTodo


    let update (msg: Msg) (model: Model) = 
        match msg with
        | AddTodo ->
            { Todos = 
                let number = model.Todos.Count + 1
                let paddedNumber = number.ToString().PadLeft(2, '0')
                let todo = { Id = Guid.NewGuid(); Description = $"Todo {paddedNumber}"; Completed = false }
                model.Todos.Add(todo.Id, todo)
            }, Cmd.none

        | RemoveTodo id ->
            { Todos = model.Todos.Remove(id)
            }, Cmd.none

        | UpdateTodo todo ->
            { Todos = 
                model.Todos.Add(todo.Id, todo)
            }, Cmd.none

        | Clear -> 
            { Todos = Map.empty
            }, Cmd.none


open TodoApp

type TodoViewModel(store: IStore<Model, Msg>, todo: Todo) = 
    inherit ReactiveElmishViewModel()

    let mutable completed = todo.Completed
    let mutable description = todo.Description

    member this.Id with get () = todo.Id

    member this.Description 
        with get () = description
        and set value = 
            description <- value
            store.Dispatch(UpdateTodo { todo with Description = value })
            base.OnPropertyChanged()

    member this.Completed
        with get () = completed
        and set value = 
            completed <- value
            store.Dispatch(UpdateTodo { todo with Completed = value })
            base.OnPropertyChanged()

    member this.RemoveTodo() = 
        store.Dispatch(RemoveTodo todo.Id)

    //member this.Update(todo: Todo) = 
    //    completed <- todo.Completed
    //    description <- todo.Description


type TodoListViewModel() =
    inherit ReactiveElmishViewModel()

    let store = 
        Program.mkAvaloniaProgram init update
        |> Program.mkStore

    member this.Todos = 
        this.BindMap(store, _.Todos
            , transform = fun todo -> new TodoViewModel(store, todo)
            , getKey = fun todoVM -> todoVM.Id
            //, update = fun todo todoVM -> todoVM.Update(todo)
            //, sortBy = fun todo -> todo.Completed
        )

    member this.AddTodo() = store.Dispatch AddTodo
    member this.Clear() = store.Dispatch Clear

    static member DesignVM = new TodoListViewModel()

Notes:

• create is optional. It allows you to transforms newly added items to a VM (necessary is you want to edit these items, as in the todo example)
  • (If you don't need the ability to edit items, you do not need to transform them via create)
• I modified the TodoVM to have its own private backing fields for the editable properties. This eliminates the need to refresh the edited todo state from the model. However, I may also add an update parameter that gives you the option to update the VM anytime change change to that item is detect from the model side. I think it might be useful to have that as an option.
• sortBy is optional.

[JordanMarr]

Notes on the new BindMap feature (to eventually be added to readme docs):

• Allows working with a Map<'Key, 'Value> in your Elmish model as a nicer alternative to using the DynamicData SourceCache / BindSourceCache.
• BindMap sacrifices some performance compared to SourceCache because it diffs your model to check for added and removed keys. Also, there is an optional update parameter that, if used, will compare map items for changes. However, the update param will not always be required since most maps will be transformed into item view models, which can track their own property state with no need to manually map model changes back.
• I imagine that BindMap will be used as the default, but BindSourceCache methods will still be available as a fallback for use cases where there are a large number of rows and the diffing of BindMap becomes a bottleneck.

[kgday]

Well done, great additions.
As a side note, since in the dynamic data methods, we are most likely going to be transforming to a ReactiveElmishViewModel, calling .DisposeMany(), may be a good idea after the Transformations.

[JordanMarr]

I am not familiar with that command.

[kgday]

about the 4th paragraph down on the DynamicData readme:

As an example the following code will filter trades to select only live trades, creates a proxy for each live trade, and finally orders the results by most recent first. The resulting trade proxies are bound on the dispatcher thread to an observable collection. Also since the proxy is disposable DisposeMany() will ensure the proxy is disposed when no longer used.