What is the best way to link two inner Knockout Components at the page?

Question

I have two Knockout components at the page, which need to communicate.

<grid params='pPager: pPager, pGrid: pGrid, pageSize: 5'>
</grid>

<div style='float:right;'>
     <pager params='pPager: pPager, pGrid: pGrid'></pager>
</div>

At the page i have:

viewModel: function (params) {
              this.pGrid = ko.observable();
              this.pPager = ko.observable();
           }

pGrid and pPager are forwarded to grid and pager by params. pPager and pGrid are observables, meaning that each component gets notifed about creation of other. We don't know which component gets instantiated first.

Also each component renders markup, only after get instantiate.

Try at http://jsfiddle.net/SlavkoPar/066kzxjz/

Is there better way to link two inner Knockout components ?

Answer 1

There does not seem to be a reason to create a new observable for this.myGrid and this.myPager ; just use the passed-in observables:

        this.myGrid = params.pGrid;
        this.myGrid.subscribe(function (newValue) {
            Log("Pager takes grid");
        });

You might as well use Knockout for your logging textarea, too.

<textarea id="log" style="float: right;width: 200px; height: 200px;" data-bind="value:logMessages"></textarea>

The code behind it:

var messages = ko.observableArray();
var viewModel = {
    location: ko.observable(),
    logMessages: ko.computed(function () {
        return messages().join('\n');
    })
};

The other edit I made was to define the templates in the HTML. http://jsfiddle.net/066kzxjz/4/

Answer 2

Here i connected grid and pager http://jsfiddle.net/SlavkoPar/066kzxjz/

// pager
            ko.components.register('pager', {
                viewModel: function (params) {
                    var self = this;
                    Log("Pager created");
                    params.pPager(this);

                    this.pGrid = params.pGrid;

                    this.doTheJob = function () {
                        Log('Do the pager job')
                    }

                    this.pGrid.subscribe(function (newValue) {
                        Log("Pager takes grid");
                        self.doTheJob();
                    });

                    if (this.pGrid() !== undefined)
                        this.doTheJob();

                },
                template: "<div>\
                            <!-- ko if: pGrid -->\
                                 Pager rendered \
                            <!-- /ko -->\
                          </div>"
            });

            // grid
            ko.components.register('grid', {
                viewModel: function (params) {
                    var self = this;
                    Log("Grid created");

                    this.doTheJob = function () {
                        Log('Do the grid job')
                    }

                    params.pGrid(this);
                    this.pPager = params.pPager;
                    this.pPager.subscribe(function (newValue) {
                        Log("Grid takes Pager");
                        self.doTheJob();
                    });

                    if (this.pPager() !== undefined)
                        this.doTheJob();
                },
                template:  "<div>Grid rendered</div>"
            });