Knockout Component - communication sample

Button on main viewmodel invokes the dialog in the component - have to communicate via an observable property.

by Eugene Manager

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h1>Component Test</h1>
<p>
  The component contains a dialog , which we 
  want to show based on events on the main viewmodel. 
  There is no way to invoke a method on a component, so 
  I have to pass an observable to be able to mimic this.
</p>
<button data-bind="click: Find">Find Customer</button>
<p>Result: <span data-bind="text: Result"></span> </p>
<hr/>
Component:

<search-component 
    params="show: DialogVisible, callback: Update">
  
</search-component>

JavaScript

ko.components.register("search-component", {
    viewModel: function(params) {
        var self = this;
        self.Show = params.show;
        self.Callback = params.callback;
        
        self.Submit = function() {
            // hide dialog
            self.Show(false);
            // return result
            self.Callback("result");
        };
    },
    template: 
     "<div data-bind='visible: Show'>" +
     "<p>search dialog goes here</p>" +
     "<button data-bind='click: Submit'>Submit</button>"+
     "</div>"
});



// top level viewmodel
var vm = function() {
    var self = this;
    self.Result = ko.observable("");
    self.DialogVisible = ko.observable(false);
    // user has clicked Find button
    self.Find = function() {
        // show the dialog
        self.DialogVisible(true);
    };
    // callback
    self.Update = function(data) {
        self.Result(data);
    };
};

ko.applyBindings(new vm());