Reactiveui Command binding

Question

I apologize in advance if my question is a bit vague.

I am looking into and learning reactiveui which I find a very interesting concept. For that, I am building a small application using WPF and Prism and I am having some difficulties understanding the way commands are build in the View Models.

I have an example which, if complete, will hopefully clarify things for me a little bit:

I would like to have a grid that displays some data. This data is loaded from a web service and my goal is to load it once when the view is shown to the user and then to reload it every x times (once a minute, for example) or when explicitly triggered from a button in the View.

So, my View Model currently looks like:

public class MyPageViewModel : ReactiveValidatedObject
{
        /// <summary>
        /// Collection of tickets
        /// </summary>
        public ReactiveCollection<TicketModel> Tickets { get { return _Tickets.Value; } }

        /// <summary>
        /// Private store of tickets
        /// </summary>
        private ObservableAsPropertyHelper<ReactiveCollection<TicketModel>> _Tickets { get; set; }

        /// <summary>
        /// The service which retrieves the tickets
        /// </summary>
        private ITicketService _ticketService;

        public MyPageViewModel() : this(null) { }


        public MyPageViewModel(ITicketService ticketService)
        {
            LoadTickets = new ReactiveAsyncCommand(null, 0);
            }

        /// <summary>
        /// A command which exposes the load action for the tickets
        /// </summary>
        public ReactiveAsyncCommand LoadTickets { get; private set; }

        private void loadTickets()
        {
            //returns a List<TicketModel>
            var tickets = _ticketService.GetTickets();
        }
}

My questions are:

1) How do I register an async command which will be fired every x times and will call the internal loadTickets function that will reload the Ticket storage? This command will also be fired by the exposed command LoadTickets.

2) In the function, loadTickets I will fetch each time a List from the service. How do I convert this list to the ReactiveCollection that is exposed to the UI.

Ana Betts · Accepted Answer · 2012-12-13T05:31:45.463

1

1) How do I register an async command which will be fired every x times and will call the internal loadTickets function that will reload the Ticket storage? This command will also be fired by the exposed command LoadTickets.

Observable.Timer(TimeSpan.FromSeconds(10), RxApp.DeferredScheduler)
    .InvokeCommand(LoadTickets);

2) In the function, loadTickets I will fetch each time a List from the service. How do I convert this list to the ReactiveCollection that is exposed to the UI.

// This makes it so when you invoke LoadTickets.Execute, Tickets
// gets updated.
// NB: Make loadTickets return a List<Ticket>
LoadTickets.RegisterAsyncFunc(x => loadTickets())
    .Select(x => new ReactiveCollection<Ticket>(x))
    .ToProperty(this, x => x.Tickets);

edited Dec 13 '12 at 05:31

answered Dec 13 '12 at 02:14

Ana Betts

73,868
16
141
209

thanks for the information. Question 1 worked perfectly. For question 2: How do I convert the result of loadTickets() to ReactiveCollection because the loadTickets() function returns a List. If I understand correctly, the ToProperty method will take the output of the loadTickets() everytime the LoadTickets is invoked and puts it in the Tickets property. – sTodorov Dec 13 '12 at 05:12
1

If you're never going to change the contents of Tickets (i.e. you're only ever going to replace the whole thing), you don't actually need to use `ReactiveCollection`, just use `List`. Otherwise, I updated the answer for you – Ana Betts Dec 13 '12 at 05:31

Reactiveui Command binding

1 Answers1