MILANO 1863 POLITECNICO

Knockout.js COMPONENTS & ROUTING

Carlo Bernaschina – carlo.bernaschina@polimi.it

In plain HTML we end up writing long and repetitive

structures.

CSSs can help reducing styling rules to simple Tag

classes.

Still in non naïve situations the

structure can be confusing.

The Problem HTML TEMPLATES ORGANIZATION

We have HTML elements that hide complex structures.

Here are some examples:

• SELECT

• File INPUT

• VIDEO

The Question HTML TEMPLATES ORGANIZATION

The SELECT element hides the definition of a complex

and structured UI.

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="opel">Opel</option>

<option value="audi">Audi</option>

</select>

The Question HTML ELEMENTS

The File INPUT element hides the definition of a

complex UI and behavior.

<input type="file">

The Question HTML ELEMENTS

The VIDEO element hides the definition of a complex

structured UI and behavior.

<video width="320" height="240" controls>

<source src="movie.ogg" type="video/ogg">

</video>

The Question HTML ELEMENTS

Can we define our own custom elements?

The Question HTML CUSTOM ELEMENTS

Yes We Can

Defining custom elements we can organize the

structure of an application in a more clean way.

<main-menu></main-menu>

<todo-list></todo-list>

A Solution HTML CUSTOM ELEMENTS

In Knockout.js it is possible to define components.

“Components are a powerful, clean way of organizing

your UI code into self-contained, reusable chunks.”

These allow the developer to better structure both the

Views and the View-Models of the application.

Knockout.js COMPONENTS

In Knockout.js new components are defined in the following way.

ko.components.register(<the component name>, { template: <the template used in the component> });

The component name is any non empty string.

The template describes the HTML structure that will be used to render the component.

Components THE DEFINITION

The Template of the component can be passed to the

register function in may ways:

• Template ID

• String

• …

Components THE DEFINITION - TEMPLATE

The Template of the component can be a template ID.

In HTML it is possible to define templates in the following way.

<template id="my-component-template"> <h1>Title</h1> <button>

Click me right now

</button> </template>

In the register function it can be passed as follow.

template:{element: 'my-component-template'}

Components THE DEFINITION - TEMPLATE

The Template of the component can be a string.

'<h1>Title</h1><button>Click me right now</button>'

In the register function it can be passed as follow.

template: '<h1>Title</h1> … </button>'

Components THE DEFINITION - TEMPLATE

The Component can have an optional ViewModel that

allow one to define custom properties and events.

ko.components.register(<the component name>, {

template: <the template used in the component>

viewModel: <ViewModel constructor>

});

Components THE DEFINITION - VIEWMODEL

Once the Component has been defined it can be used

via the component binding.

<div data-bind='component: "<name>"'></div>

Components THE DEFINITION - USAGE

It is possible to pass data to the component using a

params property in the component binding.

<div data-bind='component: {

name: "<name>",

params: { … }

}'></div>

Components THE DEFINITION - PARAMS

The defined parameters are the first argument passed

to the ViewModel constructor

function ViewModel(params) {

…

}

Components THE DEFINITION - PARAMS

In Knockout.js it is possible to include components

into the views using custom elements.

“Custom elements are an optional but convenient

syntax for consuming components.”

These make the Views more readable and self

explaining.

Knockout.js CUSTOM ELEMENTS

A custom element can be included into the HTML as a normal element.

<div data-bind='component: {

name: "<component-name>",

params: { … }

}'></div>

Becomes

<component-name params=" … "></component-name>

Knockout.js COMPONENTS - USAGE

A SPA (Single Page Application) is an application

developed with client-side technologies that, instead of

reloading the page when navigating from one area to

another, dynamically changes the structure of the page to

reflect the navigation.

In SPAs a common problem is Routing.

We would like keep the URL-based nature of the web while

redirecting requests to different URLs to different areas of

the same application.

Routing SINGLE PAGE APPLICATIONS

For Knockout.js is available a library that exploits components for manage routing.

ko-component-router

https://github.com/caseyWebb/ko-component-router

Routing A COMPONENT BASED APPROACH

ko-component-router is a library based on page.js that

organizes the areas of the SPA in components.

Each component describes a different area.

The navigation from one area to another triggers the

disposal of the active component and the instantiation of

the component responsible of the target one.

Routing A COMPONENT BASED APPROACH

In a SPA based on ko-component-router the area that will

be updated on navigation is marked by a particular

element.

<ko-component-router></ko-component-router>

The initialization of the router is done by

ko.router.start();

Routing INITIALIZATION

Components describing an application area are defined as

usual.

The only difference is in the ViewModel initialization where

instead of the params object a context is passed.

The context represents the current state of the application.

function HomeViewModel(ctx) {

…

}

Routing DEFINE COMPONENTS

A Route is an access point for the application.

It is defined by the Path and the component that will

manage the matching requests.

ko.router.route(<path>, <component>)

Example

ko.router.route('/home', 'Home')

Routing DEFINE ROUTES

What can be used as a Path?

A Path can be a simple string describing the address.

'/some/folder/in/the/path‘

It can contain Wildcards

'/*‘

It can be a Regular Expression

/^\/commits\/(\d+)\.\.(\d+)/

Routing DEFINE ROUTES

In the path of a page we can define Parameters.

A Parameter is a part of the path that can match a string.

The current value of the parameter is passed to the

Component ViewModel.

ko.router.route('/user/:user_id', 'UserDetails')

The parameter is accessible from the context

function UserDetailsViewModel(ctx) {

… ctx.params.user_id …

}

Routing ROUTE PARAMETERS

While normal links can be used it is better to use the custom route binding.

<a href="/user/1234">John Doe</a>

Becomes

<a data-bind="route: '/user/1234'">John Doe</a>

This allow one to compute the target route dynamically as it can be computed based on Knockout.js Observables.

Routing NAVIGATION

• http://www.html5rocks.com/en/tutorials/webcompon

ents/customelements/

• http://knockoutjs.com/documentation

• https://github.com/caseyWebb/ko-component-router

• https://visionmedia.github.io/page.js/

Reference