Post
Ask Question

Introduction To Knockout Components

By looking at the word “Component”, we can guess that it is unit or chunk of a large system. Knockout component is one of the approaches used for organizing the UI code in encapsulated and reusable units. It help us to do modular development. Knockout Component asynchronously combines a template (view) and data (view model). As I was an ASP.NET developer, for me, it looks similar to user controls. It was released in Knockout version 3.2 on Aug 12, 2014. It supports most of the browsers (all starting from IE6).

You can find the design specification from this link.

Let’s take a scenario in this article. Suppose, your boss told you to create an employee widget where we need to show the employee address, designation, and contact number whenever we hover the employee name. It is required in multiple places in the project.

Pre-requisites

  • Basic knowledge of Knockout and MVVM pattern
  • Basic knowledge of HTML and CSS
  • Knowledge of JavaScript.
    (As I work on Microsoft Technology, I will pick Visual Studio as my editor.)

Benefits of knockout Component

  • It provides encapsulation
  • It provides reusable code
  • It can be loaded on demand via AMD or other Module Systems. (This is out of scope of this article).

Component Life-cycle

Component lifecycle

I intentionally didn’t keep dispose above,  it is even the last stage because it happens when we redirect to other page or when we change the value of observable bind with the component binding.

Steps to create Component

Steps to create Component

Define Template and ViewModel

Let’s see ViewModel first. We can define a ViewModel, as shown below,

  • It can be defined as a function and then will be initialized as a constructor (called with new).
  • We can pass an instance property of an object directly.
  • We pass a function to create ViewModel property which will act as a factory and return an object of a function
  • It can be an external JS file.

Now, we will look at the different ways we can define a template:

  • We can pass a String of markup (html).
  • We can pass as Array of DOM nodes.
  • We can give Element id of template.
  • Even, we can pass the instance of Element instances
  • It can be an external file

    Note: We can also add using AMD or other module systems but I am taking only this, in this blog.

Registering a component

Default Knockout Component loader searches the components which are registered, with “ko.component.register” API. This registration accepts a component name and a configuration which defines the template and the ViewModel for the component.

  1. ko.components.register('componentName', {  
  2. viewModel: viewModelKey,  
  3. template: templateKey  
  4. });  
NOTE: While registering, ViewModel is optional. We can register a component only with template. In that case, it allows the parameters to bind to the template controls.]

Implementing in UI

We can implement Knockout components in two ways:
  • Component Binding
  • Custom Elements

Component Binding

With this functionality, Knockout will provide a component binding as an option for rendering a component on the page (with the other option being a custom element). The component binding syntax is fairly simple. Component binding can be defined in two ways:

Passing a component name (short syntax),

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

Knockout searches the string (name) in the list of registered components and injects the component without parameter. We can also pass an observable contains component name.

<div data-bind='component: observableComponentName'></div>

Full Syntax

We can also pass the name of the component with the parameters optional.

  1. <div data-bind='component: {  
  2. name: "shopping-cart",  
  3. params: { mode: "detailed-list", items: productsList }  
  4. }'></div>  
Custom Elements

While the Custom Element is an easy way to display a component and will be necessary when dynamically binding to components (dynamically changing the component name), custom elements will likely be the “normal” way for consuming a component. It is the most convenient syntax to understand. Knockout takes care to ensure the compatibility even with old browsers, such as IE 6.

<my-component params="name: userName, type: userType"></my-component>

Example

After discussing all the basic knowledge of Knockout components, let’s start with the scenario I had mentioned earlier.
[Here I am using Visual Studio as my IDE. You can use any IDE you want and you are comfortable with].

Step 1. First of all, I will create an empty ASP.NET MVC application in Visual Studio.

Step 2. I will create a Controller and a View for index action. [In the above steps, we just create our project structure which will be different in different IDE]

Step 3. Before adding Knockout, add jQuery. In ASP.NET MVC project, it is already added

project

Step 4. Go to NuGet and search knockout js. Click on install. (We can also download the knockout.js from knockout website).

knockout website

Step 5. Now, add the reference of Knockout in layout page or the web page.

reference

Now, we have set all the basic steps up, to start with Knockout components.

Step 6. Next, we will create the template. For template, we create a partial View, as shown below:

code

Step 7. Now, we create the ViewModel in a separate JS.

code

Step 8. Next, we register the employee component.
code

Step 9. We also created a custom binding to have our hover functionality.

code

Step 10. Now, we have set up all the required JS files and  HTML (partial View). We will refer them in our html.

JS files:
code

Partial Views:

code

Step 11. New, create a ViewModel for the page and define a variable for the employee,

code

Step 12. At last, we will consume the component in our application.

code
We can also use this component in a loop as below,

code

References 
  • http://knockoutjs.com/documentation/component-overview.html
  • http://www.knockmeout.net/2014/06/knockout-3-2-preview-components.html


Similar Articles