Events Knockout.JS：如何在组件内部激发事件并使用它

在文件“KoComponents.js”中，我编写了以下组件

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

ko.components.register（'pager-navigator'{
viewModel:函数（参数）{
var self=这个；
self.GoToPageNumber=函数（页码）{
//使用参数pageNo的值引发事件和。
警报（'用参数（页码）='+页码单击按钮）；
}
},
模板：“”

}))

在视图中，我编写了以下代码来使用创建的组件

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

---

我的问题是：如何使用参数在组件中激发事件并从视图中使用该事件

构建代码的好方法是在父页面和组件之间共享可观察变量。它将与参数一起传递

因此，如果您的父VM有一个名为“pageNum”的可观察对象，那么请确保您的组件也有，然后将可观察对象传递给组件以链接它们

这样，如果组件更改了pageNum值，那么父级中的可观察值也将更改。因此，您可以订阅父级中的变量，如果它发生更改，您可以执行一些代码。本质上，如果组件更改了pageNum，那么父级将知道并可以相应地采取行动

这听起来可能有点冗长，但这是一个非常干净的解决方案，它确实可以帮助您将问题分解为多个部分，并减少强耦合

希望这个解释有道理，但如果你需要一把小提琴来演示，请告诉我。

这是答案：

在名为“CurrentPageNumber”的页面中创建一个可观察的参数

将可观察参数传递给组件

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

在组件中，可以更改传递参数的值。（充当通过引用传递的角色）

在视图中，您需要添加一个subscribe方法，并在CurrentPageNumber的值更改时处理自定义操作

检查下面的示例代码

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

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