在页面上链接两个内部 Knockout 组件的最佳方式是什么？答案

【问题标题】：What is the best way to link two inner Knockout Components at the page?在页面上链接两个内部 Knockout 组件的最佳方式是什么？
【发布时间】：2018-05-21 16:30:25
【问题描述】：

我在页面上有两个 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 组件？

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

似乎没有理由为 this.myGrid 和 this.myPager 创建新的 observable；只需使用传入的 observables：

        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/

【讨论】：

很好。我获取父组件的另一种方法是：ko.bindingHandlers.GridHandler = { init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { viewModel.pContainer = bindingContext['$parentContext'].$component } }

【解决方案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>"
            });

【讨论】：