Components are way of organizing the UI code for structure wise and promote code re-usability for a large application.
Components can be registered using the ko.components.register() API.
ko.components.register('componentname', {
viewModel: {...},
template: {....)
});<!DOCTYPE html>
<head>
<title>Components of KnockoutJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
</head>
<body>
<h4>Example 1: without parameters</h4>
<div data-bind='component: "example-editor"'></div>
<h4>Example 2: passing parameters</h4>
<div data-bind='component: {name: "example-editor", params: { initialText: "Hi! there." }}'></div>
<script>
ko.components.register('example-editor', {
viewModel: function(params) {
this.str = ko.observable(params && params.initialText || '');
},
template: 'Result: <input data-bind="value: str" /> ' + '<br />' + 'Characters: <span data-bind="text: str().length"></span>'
});
ko.applyBindings();
</script>
</body>
</html>