Correct construction SPA with Knockout

I just want to know some details during construction SPA with Knockout. I make main page with MainMenu (ul) and MainContent (div). MainContent is empty. From main menu I can invoke following commands: Home page, Product list, New product, About page and etc.



For example I invoke Product list.

1. I get ProductList HTML (ul with foreach binding) from a server.

2. Insert ProductList (ul) in MainContent (div).

3. Create ListViewModel, apply binding to MainContent (div).

4. Get data from a server (10 objects) and put the data to observable array in ListViewModel.

Everything is fine. Browser show me all 10 objects in ProductList (ul). Then from the main menu I invoke about page:

1) Get AboutPage HTML from the server.

2) Insert AboutPage (HTML) in MainContent (div).

Everything is fine. Browser show me about page.



Then I want to invoke Product list again. I click Product list but Browser show me only 1 product (without any data in it) in ProductList (ul) in ProductList although there are no errors.

This way of construction is correct? Some advice? Should I re create ViewModel of Product list. Should I re apply bindings?