Reactive UI 结合结合观察
Reactive UI combining combining observables
我正在尝试为我的应用程序构建注册向导。目标框架是 .NET Core 3.1 和 Blazor Server。我想要实现的是:
- 在第一页上,用户应该能够输入所需的信息,并且只有在验证有效时才能继续。
- 第二页还有其他表格。
这是我尝试组合可观察对象和创建单个反应命令的尝试:
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
将获取两个可观察值并将它们合并。然后,您可以订阅合并的新可观察对象。
我正在尝试为我的应用程序构建注册向导。目标框架是 .NET Core 3.1 和 Blazor Server。我想要实现的是:
- 在第一页上,用户应该能够输入所需的信息,并且只有在验证有效时才能继续。
- 第二页还有其他表格。
这是我尝试组合可观察对象和创建单个反应命令的尝试:
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
将获取两个可观察值并将它们合并。然后,您可以订阅合并的新可观察对象。