StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your general approach is perfectly fine MVVM, having a ViewModel exposing a collection of other ViewModels is a very common scenario, which I use all over the place. I would not recommend exposing items directly in a ViewModel, like nicodemus13 said, as you end up with your view binding to models without ViewModels in between for your collection's items. So, the answer to your first question is: Yes, this is valid MVVM.</p> <p>The problem you are addressing in your second question is the synchronization between the list of people models in your house model and the list of people ViewModels in your house ViewModel. You have to do this manually. So, no there is no way to avoid this.</p> <p><img src="https://i.stack.imgur.com/29Z8S.png" alt="enter image description here"></p> <p>What you can do: Implement a custom <code>ObservableCollection<T></code>, <code>ViewModelCollection<T></code>, which pushes it's changes to an underlying collection. To get two way synching, make the model's collection an ObservableCollection<> too and register to the <code>CollectionChanged</code> event in your ViewModelCollection.</p> <p>This is my implementation. It uses a ViewModelFactory service and so on, but just have a look at the general principal. I hope it helps... </p> <pre class="lang-cs prettyprint-override"><code>/// <summary> /// Observable collection of ViewModels that pushes changes to a related collection of models /// </summary> /// <typeparam name="TViewModel">Type of ViewModels in collection</typeparam> /// <typeparam name="TModel">Type of models in underlying collection</typeparam> public class VmCollection<TViewModel, TModel> : ObservableCollection<TViewModel> where TViewModel : class, IViewModel where TModel : class { private readonly object _context; private readonly ICollection<TModel> _models; private bool _synchDisabled; private readonly IViewModelProvider _viewModelProvider; /// <summary> /// Constructor /// </summary> /// <param name="models">List of models to synch with</param> /// <param name="viewModelProvider"></param> /// <param name="context"></param> /// <param name="autoFetch"> /// Determines whether the collection of ViewModels should be /// fetched from the model collection on construction /// </param> public VmCollection(ICollection<TModel> models, IViewModelProvider viewModelProvider, object context = null, bool autoFetch = true) { _models = models; _context = context; _viewModelProvider = viewModelProvider; // Register change handling for synchronization // from ViewModels to Models CollectionChanged += ViewModelCollectionChanged; // If model collection is observable register change // handling for synchronization from Models to ViewModels if (models is ObservableCollection<TModel>) { var observableModels = models as ObservableCollection<TModel>; observableModels.CollectionChanged += ModelCollectionChanged; } // Fecth ViewModels if (autoFetch) FetchFromModels(); } /// <summary> /// CollectionChanged event of the ViewModelCollection /// </summary> public override sealed event NotifyCollectionChangedEventHandler CollectionChanged { add { base.CollectionChanged += value; } remove { base.CollectionChanged -= value; } } /// <summary> /// Load VM collection from model collection /// </summary> public void FetchFromModels() { // Deactivate change pushing _synchDisabled = true; // Clear collection Clear(); // Create and add new VM for each model foreach (var model in _models) AddForModel(model); // Reactivate change pushing _synchDisabled = false; } private void ViewModelCollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { // Return if synchronization is internally disabled if (_synchDisabled) return; // Disable synchronization _synchDisabled = true; switch (e.Action) { case NotifyCollectionChangedAction.Add: foreach (var m in e.NewItems.OfType<IViewModel>().Select(v => v.Model).OfType<TModel>()) _models.Add(m); break; case NotifyCollectionChangedAction.Remove: foreach (var m in e.OldItems.OfType<IViewModel>().Select(v => v.Model).OfType<TModel>()) _models.Remove(m); break; case NotifyCollectionChangedAction.Reset: _models.Clear(); foreach (var m in e.NewItems.OfType<IViewModel>().Select(v => v.Model).OfType<TModel>()) _models.Add(m); break; } //Enable synchronization _synchDisabled = false; } private void ModelCollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { if (_synchDisabled) return; _synchDisabled = true; switch (e.Action) { case NotifyCollectionChangedAction.Add: foreach (var m in e.NewItems.OfType<TModel>()) this.AddIfNotNull(CreateViewModel(m)); break; case NotifyCollectionChangedAction.Remove: foreach (var m in e.OldItems.OfType<TModel>()) this.RemoveIfContains(GetViewModelOfModel(m)); break; case NotifyCollectionChangedAction.Reset: Clear(); FetchFromModels(); break; } _synchDisabled = false; } private TViewModel CreateViewModel(TModel model) { return _viewModelProvider.GetFor<TViewModel>(model, _context); } private TViewModel GetViewModelOfModel(TModel model) { return Items.OfType<IViewModel<TModel>>().FirstOrDefault(v => v.IsViewModelOf(model)) as TViewModel; } /// <summary> /// Adds a new ViewModel for the specified Model instance /// </summary> /// <param name="model">Model to create ViewModel for</param> public void AddForModel(TModel model) { Add(CreateViewModel(model)); } /// <summary> /// Adds a new ViewModel with a new model instance of the specified type, /// which is the ModelType or derived from the Model type /// </summary> /// <typeparam name="TSpecificModel">Type of Model to add ViewModel for</typeparam> public void AddNew<TSpecificModel>() where TSpecificModel : TModel, new() { var m = new TSpecificModel(); Add(CreateViewModel(m)); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload