Best practices for passing data into View and setting content and title accordingly

[kbelisle]

I have a scenario similar to something which is featured in the Airlines Sample App on the My Trips page and I'm wondering what the best practices are for passing data into a View and modifying its content and title accordingly.

Basically, I will have a View which features a list of items. When a user click on of these items, he should get sent to a different view where certain fields and the view title are set to the information relevant to the selected item.

In the Airlines Sample App it works as follows :

• The list of items are all links to the "details" view
• There is a click event handler attached to each item in the list
• When an item is clicked :

1. The event handler fires and a global variable gets set to the information relevant to clicked item
2. The href attribute points to the "details" view

• The "details" view's "pageshow" event** is triggered, which fetches information in previously set global variable and sets the "details" view's content appropriately.

I do not like the use of a global variable to passe information between views... It seems to me there should be some sort of app.navigate(myVew, myData); method which passes myData along to the view's beforeShow and show event handlers or sets the view's viewModel.

The one method I've found which ressembles something I'd find acceptable involves doing the following in a click event handler :

app.navigate("#details?City=Magog&Country=Canada&...");

Unfortunately, the passed data is only available in the view's "show" event, not in "beforeShow" event - ideally I'd like to populate the view during the beforeShow, to ensure the user doesn't see the values flash when the page loads.

I'm faced with a similar situation when trying to change the "details" view's title. The title should appear in the NavBar header which is part of the default Layout. I can't seem to change the title in the beforeShow event, only in the show event. I believe this is because the Layout (and therefore the NavBar with the title) is moved into the view after the beforeShow event and before the show event. Again, I'd like to ensure the user doesn't see the view's title flicker when the page loads.



What are the best practices for these situations?
It seems like passing data to a view would be a fairly common occurrence, yet I couldn't find anything in the official documentation.


** The pageshow event is not documented anywhere I could find. I assume it was replaced by the "beforeShow" and "show" events?

[Petyo]

Hello Kevin,

The recommended practice in this case would be to use view parameters. Since the beforeShow event is preventable, the parameters are not visible there, indeed. Otherwise the view would be left in an invalid state if the event is prevented. However, performing the changes in the show event should be sufficient – updating a couple of text fields immediately after the element is displayed should be faster than what the human eye can detect. In addition, if you use the slide effect, the element will be outside of the viewport. 

Unless I am missing something, the Airlines Sample you refer to is built using jQuery Mobile.  

Regards,
Petyo
Telerik