Databinding

Databinding

Exercise 1 - data binding

List all places with databindind

• Show all places together with a button for each one in a html table, like this:

Title	Latitude	Longitude
...	...	...	details-button
...	...	...	details-button

• When clicking the button, show an alert("Nothing to see here. Move on...")

Show details for one place

• Implement the details button. When the button is clicked, show the details for the selected place

BONUS: Show a spinner while waiting for page to load

• Avoid showing content in a "half-drawed" state before it is databound. (This is also referred to as FOUC - Flash Of Unrendered Content)
• Show a wait-spinner instead. (You can get a free one from http://ajaxload.info)
• Tip: You can "slow down" the WebAPI backend of our application by using Thread.Sleep(1000)

Exercise 2 - templates and components

Showing and hiding elements

• Create templates for each of the three "views" that will make up our application. Move the corresponing HTML into their respective templates.

View (or template)
List of all places
Details for a place
Add a new place

• Change the page to only show one of these views at any time, give the user a way to navigate back and forth between the views. (A back button etc.)

BONUS: Load template dynamically

• Refactor from using templates to using components instead.
• Make each template a separate html file, and load them dynamically as needed. (See knockout.js' documentation for how we can use require.js for this)
• You can still share one viewmodel between all the components.
• Tip: You can use databinding to select a component by name, as well as pass parameters to it, like this: data-bind="component: ..., params: { ... }"