javascript - KnockoutJS - 可以使用 SPA 的父/ subview 模型吗？

Question

我需要知道 KnockoutJS 是否可以支持这样的应用程序结构:主容器 div 已使用 applyBindings 绑定(bind)到某个 View 模型，然后在该 div 内有一个具有自己的 View 模型的子 div，但他们能够相互沟通吗？

 <div id="main">
   <div id="child">

   </div>
 </div>

然后

ko.applyBindings(pageViewModel, document.getElementById('main'));
ko.applyBindings(childViewModel, document.getElementById('child'));

但是“child”中的某个元素能够调用 pageViewModel 而不是 childViewModel 上存在的函数吗？我觉得如果没有这个功能，Knockout 可能不支持完整的水疗设置。这实际上在某种程度上是可能的吗？

Answer 1

ko.components.register('message-editor', {
  viewModel: function(params) {
    this.clickFn = params.clickFunction
  },
  template: '<button data-bind="click:clickFn">Click</button>'
});

vm = {
  fn: function() {
    console.debug("Doing something in the parent");
  },
  fn2: function() {
    console.debug("Also something in the parent");
  }
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>First instance, without parameters</h4>
<div data-bind='component: {
                name: "message-editor",
                params: {clickFunction: fn}
                }'></div>

<h4>Second instance, passing parameters</h4>
<div data-bind='component: {
    name: "message-editor",
    params: { clickFunction: fn2 }
}'></div>

是的，您正在寻找components 。主视图模型可以引入任意数量的组件并向它们传递 View 模型的值，包括在主视图模型上操作的可观察对象或函数。