KO Binding events to a component parentElement

by Kevin Van Lierde

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<custom-button params="msg: myMsg, label: label, bg: bg"></custom-button>
<input type="text" data-bind="value: myMsg">
<input type="text" data-bind="value: bg">
<template id="custom-button-tmpl">
    <button type="button" data-bind="text: label"></button>
</template>

CSS

custom-button {
  border: 1px solid black;
  padding: 1rem;
  cursor: pointer;
}

JavaScript

function customButton(params, parent) {
    var self = this;
    this.msg = params.msg;
    this.label = params.label;
    parent.addEventListener('click', function(e) { alert(self.msg()); alert(e.target.nodeName); }, false);
    this.background = ko.computed(function() { 
        parent.style.backgroundColor = params.bg();
    });
}
var myComponent = {
    viewModel: { createViewModel: function(params, componentInfo) {
        var parent = componentInfo.element;
        return new customButton(params, parent);
    }},
    template: { element: 'custom-button-tmpl' }
}
console.log('go');
ko.components.register('custom-button', myComponent);

var app = {myMsg: ko.observable('Are you sure you want to confirm?'), label: 'Confirm', bg: ko.observable('yellow')};
ko.applyBindings(app);