Components of KnockoutJS

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>