KnockoutJS - Components

Components are a huge way of organizing the UI code for structuring a large apppcation and promoting code reusabipty.

It is inherited or nested from other component. For loading and configuration, it defines its own conventions or logic.

It is packaged to reuse throughout the apppcation or the project. Represents the complete sections of apppcation or small controls/widgets. It can be loaded or preloaded on demand.

Component Registration

Components can register using the ko.components.register() API. It helps to load and represent the components in KO. Component name with configuration is expected for registration. The configuration specifies how to determine the viewModel and template.

Syntax

Components can be registered as follows −

ko.components.register( component-name , {
   viewModel: {...},    //function code
   template: {....)	//function code
});

The component-name can be any nonempty string.

viewModel is optional, and can take any of the viewModel formats psted in the next sections.

template is required, and can take any of the template formats psted in the next sections.

Stating a ViewModel

Following table psts the viewModel formats that can be used to register the components.

function SomeComponentViewModel(params) {
   this.someProperty = params.something;
}
ko.components.register( component name , {
   viewModel: SomeComponentViewModel,
   template: ...
});

var sharedViewModelInstance = { ... };

ko.components.register( component name , {
   viewModel: { instance: sharedViewModelInstance },
   template: ...
});

ko.components.register( component name , {  
   viewModel: {  
      createViewModel: function (params, componentInfo) {  
         ...       //function code  
         ...
      }  
   },  
   template: ....  
});

ko.components.register( component name , {
   viewModel: { require:  some/module/name  },
   template: ...
});

define([ knockout ], function(ko) {
   function MyViewModel() {
      // ...
   }

   return MyViewModel;
});

Stating a Template

Following table psts the template formats that can be used to register the components.

ko.components.register( component name , {
   template: { element:  component-template  },
   viewModel: ...
});

var elemInstance = document.getElementById( component-template );

ko.components.register( component name , {
   template: { element: elemInstance },
   viewModel: ...
});

ko.components.register( component name , {
   template:  <input data-bind = "value: yourName" />
      <button data-bind = "cpck: addEmp">Add Emp </button> ,
   viewModel: ...
});

var emp = [
   document.getElementById( node 1 ),
   document.getElementById( node 2 ),
];

ko.components.register( component name , {
   template: emp,
   viewModel: ...
});

ko.components.register( component name , {
   template: someDocumentFragmentInstance,
   viewModel: ...
});

ko.components.register( component name , {
   template: { require:  some/template  },
   viewModel: ...
});

Components Registered as a Single AMD Module

The AMD module can register a component by itself without using viewModel/template pair.

ko.components.register( component name ,{ require:  some/module });

Component Binding

There are two ways of component binding.

Full syntax − It passes the parameter and object to the component. It can pass using the following properties.

name − It adds the component name.

params − It can pass multiple parameters in object on the component.

<span data-bind= component: {
   name: "tutorials point",
   params: { mode: "detailed-pst", items: productsList }
} >
</span>

Shorthand syntax − It passes the string as a component name and it does not include parameter in it.

<span data-bind =  component: "component name" ></span>

Template-only components − Components can only define template without specifing the viewModel.

ko.components.register( component name , {
   template: <input data-bind = "value: someName" />,
});

Using Component without a container element − Components can be used without using extra container element. This can be done using containerless flow control which is similar as the comment tag.

<!--ko.component: ""-->
<!--/ko-->

Custom Element

Custom element is a way for rendering a component. Here, you can directly write a selfdescriptive markup element name instead of defining a placeholder, where the components are binded through it.

<products-pst params = "name: userName, type: userType"></products-pst>

Passing Parameter

params attribute is used to pass the parameter to component viewModel. It is similar to data-bind attribute. The contents of the params attribute are interpreted pke a JavaScript object pteral (just pke a data-bind attribute), so you can pass arbitrary values of any type. It can pass the parameter in following ways −

Communication between parent and child components − The component is not instantiated by itself so the viewmodel properties are referred from outside of the component and thus would be received by child component viewmodel. For example, you can see in the following syntax that ModelValue is the parent viewmodel, which is received by child viewModel constructor ModelProperty.

Passing observable expressions − It has three values in params parameter.

simpleExpression − It is a numeric value. It does not involve any observables.

simpleObservable − It is an instance that is defined on parent viewModel. The parent viewModel will automatically get the changes on observable done by child viewModel.

observableExpression − Expression reads the observable when the expression is evaluated by itself. When the observable value changes, then the result of expression can also changs over time.

We can pass the parameters as follows −

<some-component
   params =  simpleExpression: 1 + 1,
      simpleObservable: myObservable,
      observableExpression: myObservable() + 1 >
</some-component>

We can pass the parameters in viewModel as follows −

<some-component
   params =  objectValue:{a: 3, b: 2},
      dateValue: new date(),
      stringValue: "Hi",
      numericValue:123,
      boolValue: true/false,
      ModelProperty: ModelValue >
</some-component>

Passing Markup into Components

The received markup is used to create a component and is selected as a part of the output. Following nodes are passed as part of the output in the component template.

template: { nodes: $componentTemplateNodes }

Controlpng custom element tag names

The names which you register in the components using ko.components.register, the same name corresponds to the custom element tag names. We can change the custom element tag names by overriding it to control using getComponentNameForNode.

ko.components.getComponentNameForNode = function(node) {
   ...
   ...   //function code
   ...
}

Registering Custom Elements

The custom elements can be made available immediately, if the default component loader is used and hence the component is registered using ko.components.register. If we are not using the ko.components.register and implementing the custom component loader, then the custom element can be used by defining any element name of choice. There is no need to specify configuration when you are using ko.components.register as the custom component loader does not use it anymore.

ko.components.register( custom-element , { ......... });

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Components</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/1.11.1/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/pbs/knockout/3.2.0/knockout-min.js"></script>
   </head>
   
   <body>
      <!--params attribute is used to pass the parameter to component viewModel.-->
      <cpck params = "a: a, b: b"></cpck>

      <!--template is used for a component by specifying its ID -->
      <template id = "cpck-l">
         <span data-bind = "text: a"></span>

         <!--Use data-bind attribute to bind cpck:function() to ViewModel. -->
         <button data-bind = "cpck:function(){callback(1)}">Increase</button>
         <button data-bind = "cpck:function(){callback(-1)}">Decrease</button>
      </template>

      <script>
         //Here components are registered
         ko.components.register( cpck , {
            
            viewModel: function(params) {
               self = this;
               this.a = params.a;
               this.b = params.b;

               this.callback = function(num) {
                  self.b(parseInt(num));
                  self.a( self.a() + parseInt(num) );
               };
            },
            template: { element:  cpck-l  }
         });

         //keeps an eye on variable for any modification in data
         function viewModel() {
            this.a = ko.observable(2);
            this.b = ko.observable(0);
         }

         ko.applyBindings(new viewModel() );
      </script>
      
   </body>
</html>