Component is one of the awesome thing in knockoutjs. It makes code more manageable, reusable and help you to code cleanly. Separating functionality in components make coding easier. You can create your own controls and use it anywhere in your project.

You can have nesting of components. You can break your sections into small reusable controls or you can have entire section of application in one component. For nesting of components there is option to pass data to child components through parameters. Same way for child to parent communication there is callback functionality.

As components can get asynchronously loaded or preloaded, it puts less burden on page load. It helps to improve runtime performance by incrementally loading component templates and data as needed.

You can use component like any other html tag. Let’s take a look at syntax for creating component :

ko.components.register(‘component-name’,{
	viewModel : componentViewModel script or componentViewModel file path here,
	template :  Html code or Html file or knockout template
});

Components can be registered using ko.components.register. As parameter it takes component name , view model and template. For simplicity, it’s always better to write your viewmodel and html in separate files.

In our project, we are creating components for almost everything. Let me explain you with simple example of tile component :

ko.components.register('tile', {
    viewModel: function(params) {
       this.title=ko.observable(params.title);
       this.description=ko.observable(params.description)
    },
    template: `
<div class="ibox float-e-margins animated fadeInRight">
     <div class="ibox-content">
          <h2 data-bind="text:title">Title</h2>
          <div data-bind="text:description">Description</div>
     </div>
</div>`
});

This is how you can register a component. In above example, i defined html and script inside registration.
You can define html separately as template and assign that templateName as template parameter { element : templateName } . You can also create a separate viewmodel for script and assign viewmodel-name to viewModel parameter.

Let’s take a look, i am now creating template for html content and view model for script

View Model :

var TileViewModel=function(params){
       this.title=ko.observable(params.title);
       this.description=ko.observable(params.description)
}

Template :

<div id=”tplTileView”>
   <div class="ibox float-e-margins animated fadeInRight">
      <div class="ibox-content">
           <h2 data-bind="text:title">Title</h2>
           <div data-bind="text:description">Description</div>
      </div>
   </div>
</div>

After separation, you can register component as

ko.components.register('tile', {viewModel:TileViewModel,template: { element : ’tplTileView’ })

Once the component is registered you can use it as html tag, as follows :

<tile params=”title:’Component’,description:’Knockout components are awesome!!!’”>
</tile>

You can find jsfiddles for tile component in link given below :

Tile component with view model and html inside registration

Tile component with separate view model and template

Thanks for reading :)

References: