Question

Having trouble understanding how to best do the following in Knockout:

I’m porting a multi-page server-side app to Knockout, which does a lot of different functionality and data on various pages, for example:

• List all users
• View a user page
• Edit a user page
• Your account settings
• etc.

These various pages are shown in the main part of each page, with a common header, sidebar, and footer.

There is common data on all pages (in header and sidebar), and I’d like this to behave like a ‘single page’ app (with animations between sections, etc)

Pending your feedback, I’m thinking the best approach would be to have:

• One main model, with submodels for each ‘page’
• Common observables applicable to the header, sidebar, etc
• An observable that indicates the ‘active page’ and template

For example:

var MainModel = {
   listUsersModel: { ... },
   userModel: { ... },
   accountModel: { ... },
   commonProperty: ko.observable('Blah'),
   anotherCommonProperty: ko.observable('Blah'),
   activeSection: ko.observable('listUsers')

}

While I think this will work, I’m a little fuzzy about how to “switch pages”, and update new page’s model with fresh server-side data.

Is the best/only way to do this something like:

MainModel.userModel.userId(123456)
// userModel above subscribes to userId changes, to get new server via ajax
MainModel.activeSection = 'viewUser'

?

Answer 1

Here’s an example from RNiemeyer that answers what I need:

https://github.com/rniemeyer/SamplePresentation/tree/master/js