Take this
course

Software Development / Web Development

Learning Knockout.JS

Create powerful data-driven web applications using Knockout.JS, with the help of real-world examples

Description

Among the various JavaScript libraries available to developers, Knockout.JS really stands out due to the diverse features it provides and also because it promotes the use of the Model-View-ViewModel (MVVM) design pattern to build data-driven web applications. Construct power-packed apps without compromising on its flexibility and build rich user interfaces, which will update in real-time when the data model state changes, eliminating the need to refresh pages.

Learning Knockout.JS will walk you through all of the key features of Knockout.JS and make it easy for you to quickly and easily build feature-and data-rich web applications that are easy to extend and maintain.

We start off with a brief introduction to Knockout.JS, and its various benefits, and explore the different design patterns in context of Knockout.JS to make your JavaScript code cleaner and more manageable. After that, we will walk through and understand the relationship between Models, Views, and ViewModels, as well as creating them.


Along with that, you will also learn how we can use the different data binding attributes to manipulate the output. We will also discuss and implement various important concepts such as two way data binding and dependency tracking to update your UI in real-time and to separate the components of your application into logical parts.

We will analyze Knockout’s template feature to help you deal with data context in most scenarios. Then, we will take a look at how to track the changes in dependencies and subscribe to them using computed observables and subscriptions. Furthermore, you will also learn how to customize bindings and functions as well as using extenders to create our own set of Knockout tools. Finally, we will take a look at some advanced features of Knockout.JS to take your knowledge to the next level!


Learning Knockout.JS is more than just an introduction; it’s a complete course on one of JavaScript’s innovative libraries.

Full details

Curriculum

  • Introducing Knockout.JS
    The Course Overview
    This video will provide an overview of what will be taught in this course. We will orient the viewer on what Knockout.JS is and what it can accomplish for them; also, a sample project will be demonstrated. • Give an overview of the topics that are covered in this course • Describe common obstacles to building dynamic data-driven websites and explain how Knockout.JS is a solution to those roadblocks; highlight the various features of Knockout.JS • Discuss the problem of how to catalog books, CD’s, and DVD’s. Track their location and find out who may have borrowed them. Cover a tour of the application and demonstrate the various features
    5:12
    The MVVM Design Pattern
    We will explain the MVVM software design pattern in relation to other MV* patterns (such as MVC and MVP). Describe how Knockout.JS uses MVVM in a web environment. • Explain the individual components that the MV* patterns have in common—the Model and the View • Describe the Controller in MVC and the Presenter in MVP. Then explain the ViewModel of the MVVM pattern and how it differs from the rest • Demonstrate how Knockout.JS implements the MVVM pattern using HTML and JavaScript
    5:21
    The Observer Design Pattern
    Describe the Observer software design pattern and how Knockout.JS implements it using the observable and observableArray data types. • Discuss the need for the Observer design pattern • Describe how the Observer design pattern works • Introduce the Knockout.JS observable and observableArray data types and demonstrate how they work
    2:38
    JavaScript Closures and the Module Pattern
    There are many ways to get JavaScript to mimic the class structure of OOP languages. Examine several popular methods and then introduce the Module pattern and Revealing Module Pattern. • Show how to create a simple JavaScript object and discuss the shortcomings of this approach • Demonstrate how to use functions to create objects with constructors, and give details on the limitations of this method for creating objects • Describe the Module pattern and the Revealing Module Pattern
    5:28
  • Displaying Data Using Knockout.JS
    Creating Models, Views, and ViewModels
    We will create a website with the necessary Models, Views, and ViewModels to establish a Knockout.JS application. • Set up a folder structure and add jQuery, Knockout.JS, and a JSON file of data for our project • Create a Model based on our data and add a View Model to support our View • Produce a JavaScript Module to retrieve our data from the server, update our View Model to use that Module, and add an HTML page with references to our JavaScript files
    8:27
    Displaying Model Data in a View
    In order to display our model’s data, we need to add data-binding syntax to the markup in our View. • Open the default.html file created in the previous video • Add a two-column HTML table to the body with the necessary data-bind attributes • Add the initialization script to activate Knockout.JS and view the results in the browser
    3:50
    Data Binding HTML Attributes
    There are several ways to data-bind attributes on HTML elements with Knockout.JS. We will take a look at three ways of manipulating attributes with Knockout.JS. • Add Knockout’s "style" binding to change the appearance of the data based on its value • Insert Knockout’s "css" binding to render a "class" attribute defined in our style sheet when the data contains a specific value • Add Knockout’s "attr" binding to produce a "title" attribute on the table rows
    4:10
  • Two-way Data Binding in Knockout.JS
    Updating the Model from the View and Vice Versa
    We will take a closer look at how to update the View Model from an HTML form element as well as populate an HTML form element with data from the View Model. • Add a new HTML page, data-binding.html, and a JavaScript View Model to the project • Create an HTML "input" element and use Knockout’s data-binding syntax—both "value" and "textInput"—to bind to a View Model property and show the output • Insert code for "button." Bind a View Model function to retrieve data and populate the 'input' element in the View
    6:18
    Data Binding Form Fields
    Investigate how to data-bind various HTML form elements with Knockout.JS. • Take a look at three different ways to data-bind the HTML "select" element as well as how to data-bind a 'multi-select' list • Demonstrate how to data-bind a 'checkbox' and 'radio buttons' • Show how to data-bind an HTML 'form' element
    10:34
    Controlling Form Fields with Data Binding
    Demonstrate additional bindings that can help control the appearance and functionality of HTML form elements. • Add Knockout’s 'enable' and 'disable' bindings to several HTML form elements • Use Knockout’s 'hasFocus' binding to set the focus to a specific HTML form element • We add pages and ViewModels to our project to manage Media items and borrowers using what you have learned about two-way data-binding
    9:27
  • Understanding Context in Knockout.JS
    Examining the Different Types of Context
    Context is fundamental to the MVVM pattern and data-binding. Yet, it’s often misunderstood. Demonstrate and explain the commonly used context objects in Knockout.JS. • Build a View and a View Model to demonstrate the usage of the 'foreach' binding and utilize the $data, $index, and $parentContext objects • Create a View and a View Model to show how to use the 'with' binding as well as the $parents and $parent context objects • Expand the Views by adding functionality that takes advantage of the $root and $element contexts
    9:23
    Binding with Templates
    Templates allow Knockout developers to consolidate and share UI elements among many data-binding scenarios. Templates create a new binding context; it’s necessary to understand how to deal with the new context. • Create a View and a View Model to display subsets of data from the sample project using the same template for each set of data • Discuss the role of the 'data' property and how it is used to establish context in the template using the $data context object; also use the 'as' attribute to alias the $data object to make the code clearer • Develop a View and a View Model that access templates from an external source
    6:20
    Using Multiple and Nesting ViewModels
    Sometimes, it’s necessary to use multiple ViewModels in a single View. We examine a few methods to compose a View and View Model using multiple ViewModels. • Create a View that displays data from two ViewModels using an alternate form of Knockout’s 'applyBindings' method • Discuss the shortcomings of combining ViewModels in a View by targeting elements using ‘applyBindings'; propose a way of combining ViewModels in another View Model • Build a View and a View Model composed of other ViewModels. Demonstrate how to data-bind properties of each in the View. Show how to access the composition View Model from the View
    5:48
  • Using Computed Observables and Subscriptions
    Creating Computed and Pure Computed Observables
    There are times when you want to bind to a different representation of your data than what is provided in the raw data. Using computed and pureComputed observables, you can accomplish this task. • Update the "BorrowerViewModel.js" and "MediaViewModel.js" scripts to use computed observables that sort the data before it’s displayed in the View • Update the "DefaultViewModel.js" script as well as its supporting Models, Views, and data to support displaying of the Media assets separately from the borrower assets, using the same data source • Demonstrate how to create and use a writable computed observable. Also discuss when to use a computed versus a pureComputed observable
    7:55
    Subscribing to Observables
    Subscribing to observables allows you to intercept changes made to them and perform additional tasks. • Create a new View and View Model to demonstrate how to build cascading select lists using Knockout.JS • Use Knockout’s 'subscribe' method to trigger the population of the second select list based on a value in the first select list • Show how to intercept the previous value of a change using an optional parameter of the 'subscribe' method
    5:46
  • Custom Bindings, Custom Functions, and Extenders
    Creating Custom Functions
    You can attach custom functions to Knockout’s core value types to extend their functionality. • Create a new View, View Model, and script file for Knockout extensions to demonstrate custom functions • Add a new function to Knockout’s observableArray 'fn' object to filter array items by property values • Add tables to the view that bind to observableArrays in the View Model that are populated using the custom function
    4:22
    Creating Extenders
    Extenders allow you to augment the functionality of observables by adding new properties. • Create a new View and a View Model to demonstrate how to use extenders by borrowing code from the "Borrower Management" View and View Model • Create a custom extender to validate the user input • Update the View and View Model to accommodate the new extender
    4:34
    Interacting with jQuery in Custom Bindings
    Custom bindings are a way of encapsulating behavior and exposing it in the same way in which you use 'text' or 'foreach' bindings. • Add a custom binding that creates a jQuery dialog widget • Modify the "Dashboard" View to take advantage of the new binding • Add finishing touches to the sample application using everything that you’ve learned in this course
    9:43
  • Previewing Advanced Knockout.JS
    Using Components and Custom Elements
    Components and custom elements allow you to consolidate often-used code into a single, reusable unit. • Add a new View and a View Model to your project • Create a component to display a list of colors and a function to interact with the list • Implement the component in the View
    2:55
    Using AMD Module Loaders
    AMD module loaders make it easy to modularize your code and load dependencies. • Add a new View to the project and create a View Model the Require.JS way • Add an entry-point JavaScript file and add a script reference for it in the View • Convert the component from the previous video to use Require.JS
    4:09
    Examining Durandal to Build Single Page Applications (SPA)
    Durandal is a framework that uses Knockout.JS and Require.JS to build single-page applications. • Add a "shell" View using Durandal and Require.JS conventions • Add a new entry-point JavaScript file to configure Durandal • Add a View and a View Model for the home page
    3:39

Skills

  • Hyper Text Markup Language (HTML)
  • JavaScript
  • jQuery
  • Web Applications

Similar Courses

More Courses by this Instructor