Back to Questions
641
views3
comments
Var<Var<_> list> can never be set to []
websharperlistviewsequence

I need to have an observable list to watch for add/remove/sorting order changes. And I need to observe the changes on each item individually in the list.

The only solution I could find was to use a Var<Var<_> list>.

But it seems like Var<Var<_> list> can never be set to [].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

[<JavaScript>]
module Client =

    let main() =
        let rv: Var<Var<int> list> = Var.Create []

        div [ Doc.Button "reset" [] (fun () -> Var.Set rv []) // <-------- never works
              
              Doc.Button "add"   [] (fun () -> Var.Set rv (rv.Value @ [ Var.Create (List.length rv.Value ) ]))
              
              rv.View
              |> View.Map (fun l -> div [ text (sprintf "Number of items: %i" (List.length l)) ])
              |> Doc.EmbedView

              text "List:"; br[]
              rv.View 
              |> View.Map (List.map View.FromVar >> View.Sequence) 
              |> View.Join
              |> View.Map (fun l -> l |> Seq.map (sprintf "%i " >> text) |> div)
              |> Doc.EmbedView ]

It seems to provoke some strange behaviours, I am able to set it for any value except[].

Am I doing something wrong? Is using a Var<Var<_> list> the best approach?

I've put the full code on github, hope it'll help.

Thanks!

.

This seems to be the same bug as Abnormal behavior of View.Sequence which had already been fixed a while ago but was not published yet. We just did a stack release so this is available now.

Regardless of that you should be using ListModel with lenses here instead of storing vars in a Var<'a list>. ListModel is a reactive UI.Next collection. It's much more convenient (and performant) to use than managing your own list var. Also note that there are some conveniance functions on Doc that you can use to save some Doc.EmbedView calls. View.Map f >> Doc.EmbedView is equivalent to Doc.BindView and instead of doing a View.Map on a seq you should usually use Doc.BindSeqCached which caches the result of the mapping and is only called on elements that changed so it will do fewer DOM updates (given you have no side-effects in your mapping function that you would want to be always called but that is discouraged either way). Your code with ListModel would look like this: http://try.websharper.com/snippet/qwe2/000078. In the above example if you would want to modify an elem in the list you would do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// The first parameter of ListModel is the key generation funcion. The key should be unique for
// each element. If you add another element with the same key it will override the previous one.
// If we have unique integers in the list then id should suffice as the key function.
let rv = ListModel.Create id []

//...

// Add 13 to the list
rv.Add 13

//...

// Increment 13 in the list
// LensInto gives us a reference to an element of the list with the given key.
// You can use a pair of functions, get and set, to tell it how that element should be
// selected and modified.
let v = rv.LensInto id (fun _ a -> a) 13
v.Update ((+) 1)
By on 3/18/2016 3:41 AM ()

Btw, rv.LensInto id (fun _ a -> a) 13 is just rv.Lens 13 :)

By on 3/18/2016 10:15 AM ()

Ha! That is so much nicer! Thanks István, I am going to have a look.

I've updated UI.Next and it is working now.

By on 3/18/2016 5:34 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper