MVVM sync List<string>

Question

I think this answer is the solution to my problem but I am struggling to understand how to apply it to my problem. Like the other post, I have a two collections I want to keep in sync. My model object has collections of strings:

public class Person {
    public int PersonId {get; set; }
    public string PersonName { get; set; }
    public List<string> PersonNicknames { get; set; }
}

I wrap this model object in its own ViewModel (PersonViewModel). To allow the Nicknames to be edited I also wrap them in their own NicknameViewModel. PersonViewModel then exposes an ObservableCollection<NicknameViewModel> NicknameViewModelCollection which is populated at construction:

        foreach (string stringItem in _person.PersonNicknames)
        {
            var nicknameViewModel = new NicknameViewModel(stringItem);
            this.NicknameViewModelCollection.Add(nicknameViewModel);
        }

When a string is added, removed or changed in PersonViewModel.NicknameViewModelCollection the change is not reflected in the Model collection (i.e. Person.Nicknames). Whenever the user modifies, edits or deletes the string item I need to update the Model collection. I don't understand how the linked answer works or how to apply it to this problem. An example would be amazing... I'm just at a loss here.

Answer 1

This is my standard solution for what you are searching for. It has a bit of overhead for your scenario, because it works with a ViewModel type that has a field for it's context, etc. Anyway, the sollution should become obvious. The collection syncs OneWayToSource in general and TwoWay if the model collection itself is observable. Does this help you? If not, please ask...

/// <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, new()
    where TModel : class

{
    private readonly object _context;
    private readonly ICollection<TModel> _models;
    private bool _synchDisabled;

    /// <summary>
    /// Constructor
    /// </summary>
    /// <param name="models">List of models to synch with</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, object context = null, bool autoFetch = true)
    {
        _models = models;
        _context = context;

        // 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 (TModel 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;

        // Synchronize collection of Models
        if (e.NewItems != null)
            foreach (var v in e.NewItems.OfType<IViewModel<TModel>>())
                v.AddModelTo(_models);
        if (e.OldItems != null)
            foreach (var v in e.OldItems.OfType<IViewModel<TModel>>())
                v.RemoveModelFrom(_models);


        //Enable synchronization
        _synchDisabled = false;
    }

    private void ModelCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (_synchDisabled) return;

        // Synchronize collection of ViewModels
        if (e.NewItems != null)
            foreach (TModel m in e.NewItems.OfType<TModel>()) this.AddIfNotNull(CreateViewModel(m));
        if (e.OldItems != null) foreach (TModel m in e.OldItems) this.RemoveIfContains(GetViewModelOfModel(m));
    }

    private TViewModel CreateViewModel(TModel model)
    {
        return ViewModelCache.Get<TViewModel>.ForExistingModel(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));
    }
}