Реактивный пользовательский интерфейс, объединяющий наблюдаемые - PullRequest
0 голосов
/ 28 мая 2020

Я пытаюсь создать мастер регистрации для своего приложения. Целевая среда -. 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, но Я не могу понять, как объединить эти наблюдения, чтобы у меня была только одна команда для перехода к следующему шагу.

1 Ответ

0 голосов
/ 28 мая 2020

Observable.Merge возьмет два наблюдаемых и объединит их. Затем вы можете подписаться на эту новую наблюдаемую для слияния.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...