Update reactive-view-model.md #473
Conversation
I had great difficulty and confusion to properly use ReactiveUI with Avalonia. Due to the felxible nature of Avalonia, there was many different ways I found in the forums and even the current docs that is not really great for ReactiveUI. I have provided a simple example that works elegantly with the 11.x Avalonia and ReactiveUI.
There was a problem hiding this comment.
- I think that this should have its own page under the ReactiveUI section, especially if this is a standalone example.
- The image should also be committed to the repository. ie. in
/img/concepts/reactiveui. - I do wish there was more than one validation.
- A bit imprecise to say it integrates with the Avalonia Fluent controls. It would integrate with one of Avalonia's data validation plugins.
| @@ -59,3 +59,65 @@ Any change to the view model description property is achieved using the `set` ac | |||
| When _Avalonia UI_ uses the binding to **Update** the view model, the `set` accessor ensures that any parts of the view model that depend on the description property can also react to the change if necessary. | |||
|
|
|||
| On the next page, you will learn how a reactive command acts as a special case of the view model update. | |||
|
|
|||
| ## Performing Data Validation | |||
There was a problem hiding this comment.
I think that this should have its own page under the ReactiveUI section, especially if this is a standalone example. Can be done in a future PR though.
There was a problem hiding this comment.
Agree on the separate page, will be worthwhile doing in the future with more examples and perhaps deeper dive on the workings. I am still learning and not an expert on MVVM, but this gave me a lot of confusion, if what I gave was documented, it would have saved me a ton of time.
| ``` | ||
| Below is the output: | ||
|
|
||
|  |
There was a problem hiding this comment.
The image should also be committed to the repository. ie. in /img/concepts/reactiveui.
| public MainWindowViewModel() | ||
| { | ||
| DirectoryPath = "C:\\BogusPath\\"; | ||
| this.ValidationRule( |
There was a problem hiding this comment.
I do wish there was more than one validation. Ideally one that requires multiple properties, but examples are hard to write.
There was a problem hiding this comment.
I might write more examples as I use more of this and actually understands how it works..
| @@ -59,3 +59,65 @@ Any change to the view model description property is achieved using the `set` ac | |||
| When _Avalonia UI_ uses the binding to **Update** the view model, the `set` accessor ensures that any parts of the view model that depend on the description property can also react to the change if necessary. | |||
|
|
|||
| On the next page, you will learn how a reactive command acts as a special case of the view model update. | |||
|
|
|||
| ## Performing Data Validation | |||
| ReactiveUI provides the ability to perform data validation from the ViewModel that integrates well with the Avalonia fluent controls. The example shows how this can be done. The example is for a ViewModel that exposes a directory path string that is bounded to a TextBox control on the View. | |||
There was a problem hiding this comment.
A bit imprecise to say it integrates with the Avalonia Fluent controls as it will work for any theme. It would integrate with one of Avalonia's data validation plugins: either Data Annotations, INotifyDataErrorInfo, or via exceptions. I'm not sure which one ReactiveUI is using here.
There was a problem hiding this comment.
I took a peek at the ReactiveValidationObject and it implemented the ReactiveObject, IValidatableViewModel, INotifyDataErrorInfo, thats what make this a lot easier to implement and bypass the need for me to learn too much at this stage about INotifyDataErrorInfo
I had great difficulty and confusion to properly use ReactiveUI with Avalonia. Due to the felxible nature of Avalonia, there was many different ways I found in the forums and even the current docs that is not really great for ReactiveUI. I have provided a simple example that works elegantly with the 11.x Avalonia and ReactiveUI.