Knockout component implementation

Components:

• Components  are like user control, can be implemented as individual widget/controls.
• It contains own view and own view model.
• It can receive parameters and invoke call backs
• It can be composed together or implemented from other components.

We can register the components using  ko.components.register()

full syntax:

ko.components.register("component-name",

    {

        viewModel: {

            createViewModel: function (params, componentInfo) {

                //our own view model function

            }

        },

        template: {

            element: HTML template

        }

    });

Example:

ko.components.register("my-grid-component",
    {
        viewModel: {
            createViewModel: function (params, componentInfo) {
                return new myGridViewModel(params, componentInfo.element);
            }
        },
        template: {
            element: "grid-template"
        }
    });

function myGridViewModel(params, componentInfo) {
    debugger;
    var self = this;
    self.gridSource = ko.observable(params.dataSource);
    self.gridColumns = ko.observable(params.gridColumns);
    self.isGrouped = ko.observable(params.isGrouped);
    self.isScrolled = ko.observable(params.isScrolled);
    self.isSorted = ko.observable(params.isSorted);


}

Where grid-template is a html markups and its defined like below,
<script id="grid-template" type="text/html">
        <div> Template placeholder</div>
        <div data-bind="kendoGrid:{
                        data:gridSource,
                        columns:gridColumns,
                        groupable:isGrouped, 
                        scrollable:isScrolled, 
                        sortable:isSorted}">
        </div>

    </script>


How to call this component over project?

• I have one view UsingComponentView.cshtml
• Calling component like,

       <div data-bind="component:{ name:'my-grid-component',
                                                params:{
                                                    dataSource:gridSource,
                                                    gridColumns:kendoGridColumns,
                                                    isGrouped:true,
                                                    isScrolled:true,
                                                    isSorted:true}
                                                }">
                    </div>

Full Source:  (View Model ) 

var demoViewModel = null;
$(function () {
    demoViewModel = new ViewModel();
    ko.applyBindings(demoViewModel);
});


var ViewModel = function () {
    var self = this;

    self.gridSource = ko.observableArray();
    self.kendoGridColumns = ko.observableArray();

    gridSource: LoadGridDataSource(),
    kendoGridColumns: ApplyKendoGridColumns(),

    function LoadGridDataSource() {
        return [
            { productName: "Tea", category: "Beverages", color: "green" },
            { productName: "Coffee", category: "Beverages", color: "green" },
            { productName: "Ham", category: "Food", color: "blue" },
            { productName: "Bread", category: "Food", color: "blue" },
             { productName: "Food 1", category: "xyz", color: "Red" },
            { productName: "Food 2", category: "xyz", color: "Red" },
             { productName: "Food 3", category: "xyz", color: "Red" },
            { productName: "Food 4", category: "Beverages", color: "green" }

        ];
    }

    function ApplyKendoGridColumns() {
        return [
            {
                field: 'productName',
                title: 'Product Name',
                width: "170px"
            },
            {
                field: 'category',
                title: 'Category Name',
                attributes: { style: "background-color:#=color#; color:white" },
                template: '<div>#=category#</div>',
                width: "120px"
            },
            {
                field: 'productName',
                title: 'Test Column Name',
                width: "170px"
            },
             {
                 field: 'color',
                 title: 'Category in color',
                 width: "120px"
             },
        ];
    }

  
};

View:

  <div data-bind="component:{ name:'my-grid-component',

                                                params:{

                                                    dataSource:gridSource,

                                                    gridColumns:kendoGridColumns,

                                                    isGrouped:true,

                                                    isScrolled:true,

                                                    isSorted:true}

                                                }">

                    </div>

Component - JS source: ( we have create as separate file)

ko.components.register("my-grid-component",
    {
        viewModel: {
            createViewModel: function (params, componentInfo) {
                return new myGridViewModel(params, componentInfo.element);
            }
        },
        template: {
            element: "grid-template"
        }
    });

function myGridViewModel(params, componentInfo) {
    debugger;
    var self = this;
    self.gridSource = ko.observable(params.dataSource);
    self.gridColumns = ko.observable(params.gridColumns);
    self.isGrouped = ko.observable(params.isGrouped);
    self.isScrolled = ko.observable(params.isScrolled);
    self.isSorted = ko.observable(params.isSorted);

}


The final output like,