Reactive UI 结合结合观察

Reactive UI combining combining observables

我正在尝试为我的应用程序构建注册向导。目标框架是 .NET Core 3.1 和 Blazor Server。我想要实现的是:

  1. 在第一页上,用户应该能够输入所需的信息,并且只有在验证有效时才能继续。
  2. 第二页还有其他表格。

这是我尝试组合可观察对象和创建单个反应命令的尝试:

    public sealed class CompanyViewModel : ReactiveObject
    {
        private string _name;
        private string _address;
        private string _vatNumber;
        private bool _euBased;
        private string _website;
        private Guid _headQuarterLocation;
        private Guid _primarySector;
        public readonly IObservable<bool> IsValidObservable;

        public CompanyViewModel()
        {
            IsValidObservable = this.WhenAnyValue
                 (
                     x => x.Name,
                     x => x.Address,
                     x => x.VatNumber,
                     x => x.EuBased,
                     x => x.HeadquarterLocation,
                 (name, address, vatNumbner, euBased, headquarterLocation) =>
                 {
                     return !string.IsNullOrWhiteSpace(name) && !string.IsNullOrEmpty(address) &&
                            !headquarterLocation.Equals(default) &&
                            !(euBased && !string.IsNullOrEmpty(vatNumbner));
                 });
        }
}

    public sealed class CompanyEmployeeViewModel : ReactiveObject, IDisposable
    {
        private Guid _employeeId;
        private Guid _companyId;
        private Guid _workingPositionId;
        private string _firstName;
        private string _lastName;
        private string _email;
        private string _phoneNumber;
        private bool _isCompanyRepresentative;
        private bool _canAllowProject;
        private readonly ObservableAsPropertyHelper<bool> _isValid;

        public CompanyEmployeeViewModel()
        {
           this.WhenAnyValue
                (
                    x => x.CompanyId,
                    x => x.WorkingPosition,
                    x => x.FirstName,
                    x => x.LastName,
                    x => x.Email
                 )
                .Select(values => IsPopulated(values.Item1, values.Item2, values.Item3, values.Item4, values.Item5))
                .ToProperty(this, x => x.IsValid, out _isValid);

        }
}



   public sealed class CompanyRegistrationWizardViewModel :  ReactiveObject
    {
        public readonly CompanyViewModel Company;
        private CompanyRegistrationWizardStep _currentStep;
        private SourceList<CompanyEmployeeViewModel> _employees;
        private readonly ReactiveCommand<Unit, Unit> _nextStep;
        private readonly ObservableAsPropertyHelper<bool> _currentStepIsValid;

        public CompanyRegistrationWizardViewModel(CompanyViewModel companyRegVm)
        {
            Company = companyRegVm;
            _currentStep = CompanyRegistrationWizardStep.CompanyProfileCreation;
            _employees = new SourceList<CompanyEmployeeViewModel>();

            var employeesValidationObservable = _employees.Connect().WhenPropertyChanged(x => x.IsValid).Select(x => x.Value);

            var canProceedToNextStepValidatorObservable
                = Observable.CombineLatest(Company.IsValidObservable, employeesValidationObservable)
                 .Select(x => CurrentStep == CompanyRegistrationWizardStep.CompanyEmployeeDetails ? x[0] : x[1]);

            canProceedToNextStepValidatorObservable.ToProperty(this, x => x.CurrentStepIsValid, out _currentStepIsValid);
            _nextStep = ReactiveCommand.Create(ResolveNextStep, canProceedToNextStepValidatorObservable);
        }
}

公司视图模型和员工的验证工作正常,我可以查看 IsValid 属性 是否为真,但我不知道如何合并这些观察结果,以便我只能使用一个命令来继续下一步。

Observable.Merge 将获取两个可观察值并将它们合并。然后,您可以订阅合并的新可观察对象。

http://reactivex.io/documentation/operators/merge.html