Knockout.js components&routing
2 likes•2,128 views
This document discusses using Knockout.js components and routing to organize a single page application. It describes how to define custom components with templates and view models, pass data to components, and include components in views. It also explains how to use the ko-component-router library to manage routing between components and define routes with paths and parameters.
Knockout.js components&routing
- 1. MILANO 1863 POLITECNICO Knockout.js COMPONENTS & ROUTING Carlo Bernaschina – [email protected]
- 2. 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
- 3. We have HTML elements that hide complex structures. Here are some examples: • SELECT • File INPUT • VIDEO The Question HTML TEMPLATES ORGANIZATION
- 4. 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
- 5. The File INPUT element hides the definition of a complex UI and behavior. <input type="file"> The Question HTML ELEMENTS
- 6. 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
- 7. Can we define our own custom elements? The Question HTML CUSTOM ELEMENTS
- 8. 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
- 9. 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
- 10. 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
- 11. The Template of the component can be passed to the register function in may ways: • Template ID • String • … Components THE DEFINITION - TEMPLATE
- 12. 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
- 13. 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
- 14. 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
- 15. Once the Component has been defined it can be used via the component binding. <div data-bind='component: "<name>"'></div> Components THE DEFINITION - USAGE
- 16. 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
- 17. The defined parameters are the first argument passed to the ViewModel constructor function ViewModel(params) { … } Components THE DEFINITION - PARAMS
- 18. 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. 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
- 24. 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
- 25. 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
- 26. 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
- 27. 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
- 28. 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
- 29. • 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