Master/Details Functionality #140

elleryfamilia opened this Issue Jul 31, 2013 · 3 comments


None yet
2 participants

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?

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.

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

getViewModelFromParams: function(callback){                

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 commented Aug 1, 2013

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:

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment