Master/Details Functionality

[elleryfamilia]

Say the structure of my viewModel looks like this (but with many more students):

{ class: "CS101", professor: "Halperin" students: [{id: "1", name: "John"}, {id: "2", name: "Bill"}] }

How do I go about building a 2-page pager app which work as Master/Details? This means that page1 would display information about the class, when clicking on a student would load page2 which would display only information for said student.

I tried achieving this with params feature, but 1) It won't let me pass the entire "student" object 2) If student has a third-level hierarchy, how do I pass that information along so that it can be further pass to a future page3 if need be?

[elleryfamilia]

I'm trying to read an "id" passed as a param into a page, then use that to build a custom model on withOnShow... it doesn't look like I have access to page params there though.

In an ideal world, I'd be able to do something like the below (assuming feedItems is a dictionary).

<span data-bind="text: feedItems()[passedParamValue].Name"></span><br/>    

I've tried this, but it looks like 'passParamValue' isn't evaluated first or something.

[elleryfamilia]

So I discovered that If I set withOnShow to this function:

getViewModelFromParams: function(callback){                
            callback(pager.getActivePage().pageRoute.params);
}

It then allows the page access to all the properties of the object I passed into it like so:

<a data-bind="page-href: {path: '../details', params: venue}">

Only trouble is, any arrays that are part of that object are flattened and must be accessed with a name like so "checkinArray[0][Id]"

so given that the below won't work, I'm still stuck:

<span data-bind="text: checkinArray[0][Id]}">

[finnsson]

Hi, sorry for the late reply. I've been on vacation.

Creating a master-detail view is probably one of the most common scenarios so I should probably document it a bit better.

I'm usually using either of these two approaches:

• wildcards (http://pagerjs.com/demo/#!/navigation/matching_wildcards)
• onNoMatch (http://pagerjs.com/demo/#!/navigation/failed_navigation)

Previously I always used wildscards, but since they reuse the same page I've found that it might be better the use onNoMatch instead in order to create detail-pages on demand (that can be accessed using tabs).

In your example the randomFailed would pick up a student ID (options.route[0]), search the view model (or access a web service for the view model), and when add the correct view model to the list of children.

Hope this helps!