CODEWITHSUNDEEP
eventsknockout.jstriggerscomponents
Mohammed Osman
Mohammed Osman

Reputation: 4246

Knockout.JS: How to fire event inside a component and consume it

In the file "KoComponents.js", I wrote the following component

ko.components.register('pager-navigator', {
viewModel: function (params) {
    var self = this;

    self.GoToPageNumber = function (pageNo) {

        // Raise event and with the value of the parameter pageNo.
        alert('Button clicked with parameter (pageNo) = ' + pageNo);
    }
},

template: '<input type="button" value="Click me and raise event" data-bind="click: function(){GoToPageNumber(1);}"/>'

});

In the view, I wrote the following to consume the created component.

<div data-bind='component: {name: "pager-navigator", params: { TotalPagesCount: 20 }}'></div>

My question is: How can I fire event in the component with parameters and consume that event from the view?

Upvotes: 2

Views: 1085

Answers (2)

Mohammed Osman
Mohammed Osman

Reputation: 4246

This is the answer:

  1. Create an observable parameter in the page named for example "CurrentPageNumber".

  2. Pass the observable parameter to the component.

  3. In the component, you can change the value of the passed parameter. (act as passing by reference).

  4. In the view, you'll need to add a subscribe method and handle your custom action when the value of CurrentPageNumber changed.

Check the sample code below.

    ko.components.register('pager-navigator', {
    viewModel: function (params) {

    var self = this;

    self.PageNumber = params.pageNumber;// pageNumber is an observable passed parameter.

    self.GoToPageNumber = function (pageNo) {

        self.PageNumber(pageNo);// Act as passing by reference.
      }
    },

     template: '<input type="button" value="Click me and raise event" data-bind="click: function(){GoToPageNumber(2);}"/>'
     });

In the view, write:

<div data-bind='component: {name: "pager-navigator", params: { totalPagesCount: totalPagesCount(), pageNumber: CurrentPageNumber}}'></div>

In the View JavaScript, write the following:

var self = this;

// Declare an observable variable named CurrentPageNumber with the value 1.
self.CurrentPageNumber = ko.observable(1);

self.CurrentPageNumber.subscribe(function (newValue) {
// The value of CurrentPageNumber is changed inside the component.
var newPageNo = newValue;

alert('value changed = ' + newPageNo);
self.SearchEmployees(newPageNo);
});

Upvotes: 1

Laurence Frost
Laurence Frost

Reputation: 2993

A good way to structure your code to share an observable variable between your parent page, and the component. It would be passed in with the params.

So if your parent VM had an observable called "pageNum" then make sure your component does too, and then pass the observable in to the component to link them.

This way, if the component changes the pageNum value then the observable in the parent will also change. So you can subscribe to the variable in the parent, and if it changes, you can execute some code. Essentially you are left with a situation where if the component changes the pageNum, the parent will know and can act accordingly.

It might sound long-winded, but it's a really clean solution, and it really helps you break problems down into sections and cut down on strong couplings.

Hopefully that explanation makes sense, but if you need a fiddle to demonstrate then let me know.

Upvotes: 1

Related Questions