在頁面上鏈接兩個內部Knockout組件的最佳方法是什么？

Question

我在頁面上有兩個Knockout組件，需要進行交流。

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

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

在頁面上，我有：

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

通過參數將pGrid和pPager轉發到grid和pager。 pPager和pGrid是可觀察的，這意味着每個組件都會因創建其他組件而被通知。 我們不知道首先實例化哪個組件。

而且，每個組件僅在實例化之后才呈現標記。

請嘗試http://jsfiddle.net/SlavkoPar/066kzxjz/

有沒有更好的方法鏈接兩個內部Knockout組件？

Answer 1

似乎沒有理由為this.myGrid和this.myPager創建新的可觀察this.myPager ； 只需使用傳入的可觀察變量：

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

您也可以將Knockout用於記錄的文本區域。

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

其背后的代碼：

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

我進行的另一項編輯是在HTML中定義模板。 http://jsfiddle.net/066kzxjz/4/

Answer 2

在這里，我連接了網格和尋呼機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>"
            });