14.01.2015 Views

Eric lippert - Amazon Web Services

Eric lippert - Amazon Web Services

Eric lippert - Amazon Web Services

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

In ‘nav.html’ is an example of how Knockout.js is leveraged<br />

for rich model binding:<br />

<br />

<br />

<br />

Hot Towel SPA<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

activate: activate,<br />

title: ‘Home View’<br />

};<br />

return vm;<br />

function activate() {<br />

logger.log(‘Home View Activated’, null, ‘home’, true);<br />

return true;<br />

}<br />

});<br />

<strong>Services</strong><br />

All the application specific services are found in the<br />

‘App/services’ folder. HotTowel comes standard with the<br />

‘logger.js’ service responsible for logging messages and also<br />

displaying it on the screen as toast notifications. The ‘services’<br />

folder is the ideal place to put logic like data-retrieval for<br />

instance.<br />

Running the template<br />

Out of the box, HotTowel is ready to run. Just hit F5 and you’ll<br />

get:<br />

ViewModels<br />

The application’s viewmodels are found in the ‘App/viewmodels’<br />

folder. Inside the ‘shell.js’, ‘home.js’ and ‘details.js’ are<br />

properties and functions bound to ‘shell.html’, ‘home.html’ and<br />

‘details.html’ respectively. For example, let’s explore ‘home.html’:<br />

<br />

<br />

<br />

And ‘home.js’:<br />

define([‘services/logger’], function (logger) {<br />

var vm = {<br />

Hands on example<br />

Let’s say you want to create a page called ‘Tweets’ that shows<br />

the latest tweets from DotNetCurry.<br />

Implement the service<br />

We will need some kind of service that will be responsible<br />

for retrieving tweets from Twitter, given a certain search term.<br />

Right-click the ‘App/services’ folder and add a new JavaScript file<br />

called ‘twitter.js’ with the following contents:<br />

DNcmagazine www.dotnetcurry.com | 27

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!