Using new ViewModel each time I open a page

Question

I didn't know how better to word the title so I went with solution that came to my mind.

Here is the problem. I have a page that has list and each item on the lists opens a detail page (on click). But the VM is reused, which causes me several problems.

• Previous data can be seen for split second when opening a the detail page

• I need certain properties to be set to specific values when the page open, but since the VM is reused it keeps all the values from the previous detail and this messes up my logic.

This UWP app. I'm using Template10 framework's NavigationService to move between pages.

Main Page ViewModel

public class MainPageViewModel : ViewModelBase {
    private List<MangaItem> _mangaList;
    public List<MangaItem> mangaList {
        get { return _mangaList; }
        set { Set(ref _mangaList, value); }
    }

    private string _mainSearchText;
    public string mainSearchText {
        get { return _mainSearchText; }
        set { Set(ref _mainSearchText, value); }
    }

    public MainPageViewModel() {
        _mangaList = new List<MangaItem>();
        mangaList = new List<MangaItem>();

        Initialize();
    }

    private async void Initialize() {
        mangaList = await MangaListGet.GetListAsync();
    }

    public async void MainSearchSubmitted() {
        mangaList = await MangaListGet.GetListAsync(_mainSearchText);
    }

    public void MangaSelected(object sender, ItemClickEventArgs e) {
        var mangaItem = (MangaItem)e.ClickedItem;
        NavigationService.Navigate(typeof(Views.MangaDetail), mangaItem.id);
    }
} 

And Detail Page ViewModel

class MangaDetailViewModel : ViewModelBase {

    private MangaItem _mangaDetail;
    public MangaItem mangaDetail {
        get { return _mangaDetail; }
        set { Set(ref _mangaDetail, value); }
    }

    private string _mangaId;

    public override async Task OnNavigatedToAsync(object parameter, NavigationMode mode, IDictionary<string, object> suspensionState) {
        _mangaId = parameter as string;
        Initialize();

        await Task.CompletedTask;
    }

    private async void Initialize() {
        mangaDetail = await MangaDetailGet.GetAsync(_mangaId);
    }

    public void ChapterSelected(object sender, ItemClickEventArgs e) {
        var _chapterId = (ChapterListItem)e.ClickedItem;
        NavigationService.Navigate(typeof(Views.ChapterPage), _chapterId.id);
    }
}

This code only shows the first problem is displaying previously loaded data for a split second. If needed I will add code that showcases the other problem, but I' not sure if it's really relevant right now. I'm thinking that maybe my entire logic is flawed or something.

EDIT:

<Page.DataContext>
    <vm:ChapterPageViewModel x:Name="ViewModel" />
</Page.DataContext>

where vm is xmlns:vm="using:MangaReader.ViewModels".

Answer 1

While Template10 documentation states the NavigationCacheMode is disabled by default, that isn't the case in it's example templates (as of writing this). This is set in View C# code (.xaml.cs file).

.xaml.cs file

namespace MangaReader.Views {
    public sealed partial class MangaDetail : Page {
        public MangaDetail() {
            InitializeComponent();
            //NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled; //this was set by default
            NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Disabled; 
        }
    }
}

Now, new ViewModel will be created each time you access a this page.