繁体   English   中英

ReactiveUI 6即时搜索(MVVM)

[英]ReactiveUI 6 instant search (MVVM)

我想对用户在文本框中的键入做出反应。

实际上,我的问题类似于在WPF / MVVM的Reactive Extensions Instant Search中发布的内容。

现在我们处于ReactiveUI的第6版,以前的代码已经过时了。 如何实现它(使用MVVM,即不使用事件)?

引人注目的示例@ http://reactiveui.net/应该有很多帮助。 您还想确保您的xaml TextBox使用UpdateSourceTrigger

<TextBox Text="{Binding SearchQuery, UpdateSourceTrigger=PropertyChanged}" Width="50" />

来自RXUI的代码复制到此处:

public class SearchViewModel : ReactiveObject, IRoutableViewHost
{
    public ReactiveList<SearchResults> SearchResults { get; set; }

    private string searchQuery;
    public string SearchQuery {
        get { return searchQuery; }
        set { this.RaiseAndSetIfChanged(ref searchQuery, value); }
    }

    public ReactiveCommand<List<SearchResults>> Search { get; set; }

    public ISearchService SearchService { get; set; }
}

和构造函数代码

// Constructor
public SearchViewModel(ISearchService searchService = null)
{
    SearchService = searchService ?? Locator.Current.GetService<ISearchService>();

    // Here we're describing here, in a *declarative way*, the conditions in
    // which the Search command is enabled.  Now our Command IsEnabled is
    // perfectly efficient, because we're only updating the UI in the scenario
    // when it should change.
    var canSearch = this.WhenAny(x => x.SearchQuery, x => !String.IsNullOrWhiteSpace(x.Value));

    // ReactiveCommand has built-in support for background operations and
    // guarantees that this block will only run exactly once at a time, and
    // that the CanExecute will auto-disable and that property IsExecuting will
    // be set according whilst it is running.
    Search = ReactiveCommand.CreateAsyncTask(canSearch, async _ => {
        return await searchService.Search(this.SearchQuery);
    });

    // ReactiveCommands are themselves IObservables, whose value are the results
    // from the async method, guaranteed to arrive on the UI thread. We're going
    // to take the list of search results that the background operation loaded,
    // and them into our SearchResults.
    Search.Subscribe(results => {
        SearchResults.Clear();
        SearchResults.AddRange(results);
    });

    // ThrownExceptions is any exception thrown from the CreateAsyncTask piped
    // to this Observable. Subscribing to this allows you to handle errors on
    // the UI thread.
    Search.ThrownExceptions
        .Subscribe(ex => {
            UserError.Throw("Potential Network Connectivity Error", ex);
        });

    // Whenever the Search query changes, we're going to wait for one second
    // of "dead airtime", then automatically invoke the subscribe command.
    this.WhenAnyValue(x => x.SearchQuery)
        .Throttle(TimeSpan.FromSeconds(1), RxApp.MainThreadScheduler)
        .InvokeCommand(this, x => x.Search);
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM