使用 Knockout.js 如何将 id 从控制器 A 中的列表传递到另一个控制器 B 中的按钮

Question

我的页面有 2 个组件，称为顶部和底部。

顶部有一个按钮，单击此按钮将带我到另一个页面。

底部控制器有一个列表，列表中的每个项目都有一个id。

问题来了，点击列表项时，按钮需要从列表中获取合适的id。

使用 Knockout.js 如何将 id 从控制器 A 中的列表传递到另一个控制器 B 中的按钮。我可以通过订阅来做到这一点吗？

Answer 1

有几个选项；

knockout-postbox by rniemeyer 在模型（或组件）之间具有 'basic' pub/sub 功能，它很受欢迎，但对于新手来说可能不太直接。
你只需在两个组件之间使用一个共享的可观察对象，在一个共同的父级上声明，这是我在下面截取的那个：

ko.components.register('component-button', {
  viewModel: function(params) {
    var self = this;

    self.sharedId = params.sharedId;
  },
  template: '<button data-bind="enable: $component.sharedId() != null, click: function () { console.log($component.sharedId()); }">' +
    '<span data-bind="visible: $component.sharedId() == null">click an item</span>' +
    '<span data-bind="visible: $component.sharedId() != null">goto item id <span data-bind="text: $component.sharedId"></span></span>' +
    '</button>',
});
ko.components.register('component-list', {
  viewModel: function(params) {
    var self = this;

    self.sharedId = params.sharedId;
    self.set = function(id) {
      if (ko.isObservable(self.sharedId)) self.sharedId(id);
    }
  },
  template: '<ul>' +
    '<li><a href="#" data-bind="click: function () { $component.set(1); }">item 1</a></li>' +
    '<li><a href="#" data-bind="click: function () { $component.set(2); }">item 2</a></li>' +
    '</ul>',
});

var viewModel = function() {
  var self = this;
  self.sharedId = ko.observable(null);

};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
  component button:<br />
  <component-button params="sharedId: $root.sharedId"></component-button>
</div>
<hr />
<div>
  component list: <br/>
  <component-list params="sharedId: $root.sharedId"></component-list>
</div>

<script type="text/javascript">
</script>

使用 Knockout.js 如何将 id 从控制器 A 中的列表传递到另一个控制器 B 中的按钮

Using Knockout.js how do i pass an id from a list in controller A to a button in another controller B

subscription

knockout.js