CODEWITHSUNDEEP
c#wpfreactiveui
Ranga B.
Ranga B.

Reputation: 667

ReactiveUI: React to changes of a property

I am making my first steps with ReactiveUI but I am not able to event get a very basic example to work. I want to execute an task as soon as the property "SearchTerm" changes. I followed the instructions on the github page of ReactiveUI ("a compelling example").

I have a ViewModel with the property SearchTerm which is bind to a TextBox in my view. If I update the content of the TextBox the property is updated as expected (I used UpdateSourceTrigger=PropertyChanged).

The code in my observables never fires:

public class MainWindowViewModel: ReactiveObject
{
    public string SearchTerm
    {
         get { return m_SearchTerm; }
         set { this.RaiseAndSetIfChanged(ref m_SearchTerm, value); }
    }

    private string m_SearchTerm;

    public MainWindowViewModel()
    {
        SearchResults = new List<string>();

        var canSearch = this.WhenAny(x => x.SearchTerm, x => !string.IsNullOrWhiteSpace(x.GetValue()));

         var search = ReactiveCommand.CreateAsyncTask(canSearch,
                async _ => {
                    // this is never called
                    return await dosearch(this.SearchTerm);
                });

            search.Subscribe(results => {
                // this is never called too
                SearchResults.Clear();
                SearchResults.AddRange(results);
            });
        }

        private async Task<List<string>> dosearch(string searchTerm)
        {
            await Task.Delay(1000);

            return new List<string>() { "1", "2", "3" };
        }

        public List<string> SearchResults { get; private set; }
    }

Upvotes: 0

Views: 6181

Answers (1)

pmbanka
pmbanka

Reputation: 1962

The code inside your command never fires, because you are not invoking the command anywhere. You have to bind your command to any event (like input text changing, button click, etc).

First, expose your command from ViewModel:

public ReactiveCommand<List<string>> Search { get; private set; }

next, assign it in constructor:

this.Search = ReactiveCommand.CreateAsyncTask(canSearch,
                async _ => {
                    return await dosearch(this.SearchTerm);
                });

and finally, invoke the command when the input changes (this is the crucial missing part of your code):

this.WhenAnyValue(x => x.SearchTerm)
    .InvokeCommand(this, x => x.Search);

Put the abouve code in the constructor.

Note that this will fire searches constantly when the user types. To fix this, you can use an Rx operator called Throttle, as seen in the example you linked to.

Upvotes: 3

Related Questions