Question

我在页面上有两个Knockout组件，需要进行通信。

<body>

在我的页面上：

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

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

pGrid和pPager通过params转发到网格和寻呼机。 pPager和pGrid是可观察的，这意味着每个组件都会被告知其他组件的创建。我们不知道哪个组件首先被实例化。

此外，每个组件只有在获得实例化后才会呈现标记。

试试 http://jsfiddle.net/SlavkoPar/066kzxjz/

是否有更好的方法来链接两个内部Knockout组件？

Answer 1

似乎没有理由为this.myGrid和this.myPager创建新的可观察对象;只需使用传入的observable：

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

你也可以使用Knockout来记录textarea。

<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>"
            });

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

2 个答案: