knockout js ko component example

index.js

// wwwroot/js/ui-components klasörü açıp içinde her component'e özel dosyalar olabilir:
// alert-message.js
ko.components.register('alert-message', {
    viewModel: function (params) {
        var self = this;
        self.css = params.css;
        self.icon = params.icon;
        self.text = params.text;
        self.title = translate(`global.${self.icon}`);
    },
    template: `<div class="cs-alertbox" data-bind="css: css">
        <i class="material-icons" data-bind="text: icon"></i>
        <!-- ko if: title.length > 0 -->
        <h4 data-bind="text: title"></h4>
        <!-- /ko -->
        <p data-bind="text: text"></p>
    </div>`
});

// html üzerindeki kullanım şekli:
<alert-message params="css: 'cs-alertbox--warning-darker', icon: 'warning', text: translate('pages.graph.negativeValuesNotSupported')"></alert-message>